I want to show the div2 in replace of the div1 which style.display="none".
When i'll click the retaurants td it will replace the div1 with div 2
then show the div 2 in place of div1.
html:
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr>
<div id="div1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</div>
</tr>
<tr>
<div id="div2" style="display:none;>
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> What
You Wanna eat? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</div>
</tr>
</table>
</div>
javascript:
<script type="text/javascript">
function dd(id) {
if(id=='id2')
{
var ele = document.getElementById("div2");
if(ele.style.display == "none")
{
ele.style.display = "block";
}
}
}
</script>
my code is showing the div2 but above the div1. I want to show my div2 in place of div1.
thanks in advance.
I think you should try something like this:
First remove your div2
JavaScript:
var ele = document.getElementById("div1");
if(ele.style.display == "none") {
ele.style.innerHTML= '
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;">
What You Wanna eat?
</text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>';
}
Here you have the idea, but you can optimize this, because, in your HTML you have similar code so you can reuse it by factoring it. I think you should only replace the content. (Your real problem is that you are using a div into a tag to wrap a tag, so you can keep your first idea with inline style modification and remove useless ).
Working example:
function dd(id) {
if(id=='id2'){
var ele = document.getElementById("div1");
ele.innerHTML=
'<td width="550" height="200" colspan="4" bgcolor="e0e722">'+
'<text style="font-size:20px; font-family:Monotype Corsiva;"> '+
'What You Wanna eat?'+
'</text>'+
'<form class="demo">'+
'<div class="dropdownstay">'+
'</div>'+
'</form>'+
'</td>';
}
}
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr id="div1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay"
</div>
</form>
</td>
</tr>
</table>
</div>
EDIT
Here is a solution using inline style:
function dd(id) {
if(id=='id2'){
var tr1 = document.getElementById("tr1");
var tr2 = document.getElementById("tr2");
if(tr2.style.display == "none"){
tr2.style.display = "block";
tr1.style.display = "none";
}
}
}
<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna" id="links" bordercolor="#000000" bgcolor="#FFFF00">
<td class="product_image" id="id1" bordercolor="#666666" style="border:solid">
<h1><span style="background-color:#999999"> Stay </span></h1>
</td>
<td class="Product_image" id="id2" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1>Restaurants </h1>
</td>
<td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Things to do </h1>
</td>
<!--shopping btn column -->
<td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
<h1> Shopping </h1>
</td>
</tr>
<tr id="tr1">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> Where
You Wanna Go? </text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>
</tr>
<tr id="tr2" style="display:none">
<td width="550" height="200" colspan="4" bgcolor="e0e722">
<text style="font-size:20px; font-family:Monotype Corsiva;"> What
You Wanna eat? </text>
<form class="demo">
<div class="dropdownstay">
</div>
</form>
</td>
</tr>
</table>
Related
The following code is a dynamically generated part of a form and I only can style it using css.
No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.
The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.
I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet.
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
You can use the CSS float and clear in order to do that. Here is an example.
.element{
float:right;
}
.element:nth-child(odd){
clear:right;
}
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
If you can style the parent element of those four divs, you can set
.parent {
columns: 2;
}
This will work in IE10+. https://jsfiddle.net/c979dxLe/1/
You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns
I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:
1 4
2 5
3
CSS:
.parent {
columns: 2;
}
.parent > * {
width: 100%;
}
I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the four cells (left to rigth) the last cell is not important
This is my HTML:
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top">
alexis
<div>
<div class="order-details-bottom">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top">
rtynbv
<div>
<div class="order-details-bottom">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
And this is my Script:
$("#buscador").keyup(function() {
var dInput = $(this).val();
if (!this.value) {
$('div.caja-orden-curso').fadeIn();
}
else
{
$("table#perrito").each(function()
{
$(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
$(this).show() : $(this).parents('div.caja-orden-curso').fadeOut();
});
}
});
My example only work with the first cell with the other three cells i cant.
This is my fiddle
IDs in a page must be unique. So change id="perrito" to class="perrito" and do the following.
$("table.perrito").each(function() {
if ($(this).find('div:contains(' + dInput + ')').length)
$(this).parents('div.caja-orden-curso').fadeIn();
else
$(this).parents('div.caja-orden-curso').fadeOut();
});
DEMO
Here you used find funtion on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may try this
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top top-order">
alexis
<div>
<div class="order-details-bottom top-order">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top top-order">
rtynbv
<div>
<div class="order-details-bottom top-order">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
If you want search or sort or ... on table , you can use DataTables jQuery plugins
Pagination, instant search and multi-column ordering
Supports almostany data source: Easily theme-able: DataTables, jQuery
UI, Bootstrap, Foundation
Ajax auto loading of data
and ...
$('#myTable').DataTable();
DataTables jQuery plugins
I want to pass values of two different table's row values to the javascript function onclick on the tooltip data.
Please find the fiddle http://jsfiddle.net/0w9yo8x6/34/
Below is the sample code:
<table border="1">
<tr>
<td>
<span style="float:left;">Table1Title</span>
<span style="float:right">MyData</span>
</td>
</tr>
<tr>
<td>
<table width="200px">
<tr>
<td>Data1 <img class="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data2 <img class="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data3 <img class="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table></td></tr>
</table>
<table class="myTooltipTable">
<tr><td> <span id="test" >test</span></td></tr>
</table>
If you always want to just get the first row's Table1Title you could just access it in the method instead of passing it:
function test(data){
alert("test invoked with data: " + data);
// This gets the title of the first table's row Table1Title
var table1Title = $('img.one').first().attr('data-title');
}
Have an html table as follows (# of rows vary)..
<table id="issuetable">
<tbody>
<tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a> <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
</td>
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
<tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a> <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
How can I use javascript once the page finishes loading to iterate through each row and delete the cell "issue_actions" only if the row contains an image with alt="IT Help"?
My own suggestion would be:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
The use of .empty() removes the content of the <td> elements, but does not remove the <td> itself, which should prevent the table layout being distorted by rows with differing cell-counts.
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
The following uses remove(), which demonstrates the slight visual problem:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
References:
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
siblings().
Use the pseudo selector :has and then, find your element you want to remove :
$('tr:has(img[alt="IT Help"]) .issue_actions').remove();
how can i get all songs selected when i click playselected button without selecting any songs?
</style>
<script language=JavaScript>
function checkall()
{
void(d=document);
void(el=d.getElementsByName('song[]'));
for(i=0;i<el.length;i++)
void(el[i].checked=1)
}
function uncheckall()
{
void(d2=document);
void(e2=d2.getElementsByName('song[]'));
for(i=0;i<el.length;i++)
void(el[i].checked=0)
}
</script>
<form method="post" action="/player.php" target="player">
<table width="747" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" rowspan="6" valign="top">
</td>
<td height="120" colspan="3" align="center" valign="top"></td>
<td width="176" rowspan="6" valign="top"></td>
</tr>
<tr>
<!-- movie name -->
<td width="179" height="150" align="center" valign="top"><h3><font color="#008080">moviename</font></h3>
<!-- movie Description start (add description in between these tags)-->
<pre>
</pre> <!-- movie Description end-->
</td>
<td colspan="2" valign="top"><img src="/images/moviename.jpg"></td>
</tr>
<tr>
<td width="179" height="44" align="center"><input type=submit value="Play Selected" /></td>
<td width="86"><input type=button onClick="checkall()" value="Select All" name="button"></td>
<td width="156"><input type=button onClick="uncheckall()" value="Invert Selection" name="button"></td>
</tr>
<tr>
<td colspan="3" valign="top"><table height="342" cellspacing="0" cellpadding="0" border="0" width="423" class="VERDANAFONT">
<tbody>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_1 ,/telugusongs/moviename/0_1.mp3" />
<!-- song names -->
0_1 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_2 ,/telugusongs/moviename/0_2.mp3" />
<!-- song names -->
0_2 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_3 ,/telugusongs/moviename/0_3.mp3" />
<!-- song names -->
0_3 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_4,/telugusongs/moviename/0_4.mp3" />
<!-- song names -->
0_4<br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_5 ,/telugusongs/moviename/0_5.mp3" />
<!-- song names -->
0_5 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_6 ,/telugusongs/moviename/0_6.mp3" />
<!-- song names -->
0_6<br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_7 ,/telugusongs/moviename/0_7.mp3" />
<!-- song names -->
0_7 <br />
</font></p></td>
</tr>
<tr>
<td width="423" height="38" align="left" valign="middle"><p> <font color="#339966">
<input type="checkbox" name="song[]" value="0_8 ,/telugusongs/moviename/0_8.mp3" />
<!-- song names -->
0_8 <br />
</font></p></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
am explaining clearly... when user select one song and if click on playselect button form will post one song. that is working perfect. but when user didnot select any song any if he clicked on playselected button ,in this situation i want all songs to be selected
adding an id to your playselect button, something like this should work
javascript only approach
<input type="Button" id="PlaySelected" value="Play Selected"
onclick="checklist(myform)"/>//minor changes here made
function checklist(field)
{
var answer=false;
for (i = 0; i < field.length; i++)
{
if (field[i].type=="checkbox" && field[i].checked){
answer=true;
return false;
}
}
for (i = 0; i < field.length; i++)
{
field[i].checked = true ;
}
}
Also I forgot to mention to you to add the name "myform" to your form tag: Here is a
Click here for Demo working version
jQuery
$('#PlaySelected').click(function()
{
var answer=false;
$('input[type='checkbox']').each(function(){
answer = this.checked;
if(answer==true)
{
return false;
}
});
$('input[type='checkbox']').each(function(){
$(this).attr('checked', true);
});
});