Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Check box Alignment in Dyanmic table

Status
Not open for further replies.

manishblr1

Programmer
Dec 20, 2010
20
US
Hi here goes my code
Code:
<html>
<h2>Add Row in JavaScript</h2>
<script>

 function addRow(tableID)
{
  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow-1;
  var row = tbl.insertRow(lastRow-1);
  
  var cell0 = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cell0.appendChild(textNode);

  var cell1 = row.insertCell(1);
  var e1 = document.createElement('input');
  e1.type = 'text';
  e1.name = 'mcpName' + iteration;
  e1.id = 'mcpName' + iteration;
//  e1.size = 40;
  cell1.appendChild(e1);
  
  var cell2 = row.insertCell(2);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'mcpDesc' + iteration;
  e2.id = 'mcpDesc' + iteration;
 // e2.size = 20;
  cell2.appendChild(e2);
  
  var cell3 = row.insertCell(3);
  var e3 = document.createElement('input');
  e3.type = 'checkbox';
  e3.align = 'MIDDLE';
  e3.id = 'chkContraint' + iteration;
  e3.onclick= function(){enableConstraint(e3.id);};
  cell3.appendChild(e3);
  
  var cell4 = row.insertCell(4);
  var e4 = document.createElement('input');
  e4.type = 'text';
  e4.name = 'mcpContraintValue' + iteration;
  e4.id = 'mcpContraintValue' + iteration;
  e4.disabled=true;
//  e4.size = 40;
  cell4.appendChild(e4);
  
  var cell5 = row.insertCell(5);
  var e5 = document.createElement('input');
  e5.type = 'text';
  e5.name = 'mcpDefault' + iteration;
  e5.id = 'mcpDefault' + iteration;
  e5.disabled=true;
//  e5.size = 40;
  cell5.appendChild(e5);
  
   var cell6 = row.insertCell(6);
  var e6 = document.createElement('img');
  e6.src = 'C:/Documents and Settings/admin/Desktop/minus.gif';
  e6.style.width=20;
  e6.style.heigth=20;
  e6.onclick= function(){removeRowFromTable(this.parentNode.parentNode.rowIndex);};
//  e5.name = 'mcpDefault' + iteration;
//  e5.id = 'mcpDefault' + iteration;
//  e5.disabled=true;
//  e5.size = 40;
  cell6.appendChild(e6);
  
  
}

function removeRowFromTable(id)
{
	alert(id);
//  var tbl = document.getElementById(tableID);
 // var lastRow = tbl.rows.length;
 // if (lastRow > 6) tbl.deleteRow(lastRow - 2);
 document.getElementById('table').deleteRow(id);
}

function enableConstraint(chkId)
{
	var rowId= chkId.substring(12);
	if(document.getElementById(chkId).checked)
	{

	document.getElementById('mcpContraintValue'+rowId).disabled=false;
	document.getElementById('mcpDefault'+rowId).disabled=false;
	}
	else
	{
	document.getElementById('mcpContraintValue'+rowId).disabled=true;
	document.getElementById('mcpContraintValue'+rowId).value="";
	document.getElementById('mcpDefault'+rowId).disabled=true;
	document.getElementById('mcpDefault'+rowId).value="";
	}
}
		  
</script>
<table id="table" cellspacing="0" border="2">
<tbody>
<tr><td>ID</td><td align="center">Name</td><td align="center">Desc</td><td>Constraint</td><td align="center">ConstraintValue</td><td align="center">DefaultValue</td><td>&nbsp;</td></tr>
<tr><td>1</td><td><input type="textbox" id="mcpName1" value="" ></td><td><input type="textbox" id="mcpDesc1" value="" ></td><td align="center"><input type="checkbox" id="chkContraint1" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue1" value="" disabled></td><td><input type="textbox" id="mcpDefault1" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>2</td><td><input type="textbox" id="mcpName2" value="" ></td><td><input type="textbox" id="mcpDesc2" value=""></td><td align="center" ><input type="checkbox" id="chkContraint2" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue2" value="" disabled></td><td><input type="textbox" id="mcpDefault2" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>3</td><td><input type="textbox" id="mcpName3" value="" ></td><td><input type="textbox" id="mcpDesc3" value=""></td><td align="center" ><input type="checkbox" id="chkContraint3" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue3" value="" disabled></td><td><input type="textbox" id="mcpDefault3" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>4</td><td><input type="textbox" id="mcpName4" value="" ></td><td><input type="textbox" id="mcpDesc4" value=""></td><td align="center" ><input type="checkbox" id="chkContraint4" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue4" value="" disabled></td><td><input type="textbox" id="mcpDefault4" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td align="center"><input type="button" value="Add" onclick="javascript:addRow('table');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Delete" ></td><td  colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Submit" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Cancel"></td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</html>

i need the alignment of the checkbox to be center which is created on click of a Add button .

Thanks in advance.
 
Hi

manishblr1 said:
i need the alignment of the checkbox to be center which is created on click of a Add button .
As the alignment is done right for the 4 initial checkboxes, then why not just apply the same for the dynamically generated ones ?
Code:
  [b]var[/b] cell3 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]3[/purple][teal]);[/teal]
  [b]var[/b] e3 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e3[teal].[/teal]type [teal]=[/teal] [green][i]'checkbox'[/i][/green][teal];[/teal]
[gray][highlight]//[/highlight]  e3.align = 'MIDDLE';[/gray]
  [highlight]cell3[teal].[/teal]align [teal]=[/teal] [green][i]'center'[/i][/green][teal];[/teal][/highlight]
  e3[teal].[/teal]id [teal]=[/teal] [green][i]'chkContraint'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e3[teal].[/teal]onclick[teal]=[/teal] [b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]enableConstraint[/color][teal]([/teal]e3[teal].[/teal]id[teal]);[/teal][teal]}[/teal][teal];[/teal]
  cell3[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e3[teal]);[/teal]

Feherke.
 
Thanks feherke. That worked.
I have one more query. When i click on add button for examples 4 times and if i delete some thing in between and then again click add .. i am not getting the sequence (id column) . How can i achieve it .

Thanks in advance.
 
Hi

You mean you want the IDs to to be continuous ? Then you have to rewrite all consecutive IDs after deleting a row.

If you want the [tt]input[/tt] [tt]name[/tt]'s to contain the same number as the displayed ID column, then it is even more work. But for this part there is a trick : use arrays and let your server-side script handle them.

The below code does it the easy way :
[ul]
[li]rewrites the ID column[/li]
[li]uses arrays for [tt]name[/tt]s ( note that I added [tt]name[/tt] attributes to the first 4 rows' [tt]input[/tt]s, without them they are not submitted anyway, that is why I neither changed the mcpContraintValue* and mcpDefault* [tt]name[/tt]s )[/li]
[li]made variable iteration global and use it to generate unique [tt]id[/tt] attributes ( they will not match the displayed ID column and will have gaps after deletion, but with the current requirements that should not be a problem )[/li]
[/ul]
Code:
[b]<html>[/b]
[b]<h2>[/b]Add Row in JavaScript[b]</h2>[/b]
[b]<script>[/b]

[highlight][b]var[/b] iteration[/highlight]

 [b]function[/b] [COLOR=darkgoldenrod]addRow[/color][teal]([/teal]tableID[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] tbl [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]tableID[teal]);[/teal]
  [b]var[/b] lastRow [teal]=[/teal] tbl[teal].[/teal]rows[teal].[/teal]length[teal];[/teal]
  [gray]// if there's no header row in the table, then iteration = lastRow + 1[/gray]
[gray][highlight]//[/highlight]  var iteration = lastRow-1;[/gray]
  [highlight][b]if[/b] [teal]([/teal]iteration[teal]==[/teal]undefined[teal])[/teal] iteration[teal]=[/teal]lastRow[/highlight]
  [highlight]iteration[teal]++[/teal][/highlight]
  [b]var[/b] row [teal]=[/teal] tbl[teal].[/teal][COLOR=darkgoldenrod]insertRow[/color][teal]([/teal]lastRow[teal]-[/teal][purple]1[/purple][teal]);[/teal]

  [b]var[/b] cell0 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]0[/purple][teal]);[/teal]
  [b]var[/b] textNode [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createTextNode[/color][teal]([/teal][highlight]lastRow[teal]-[/teal][purple]1[/purple][/highlight][teal]);[/teal]
  cell0[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]textNode[teal]);[/teal]

  [b]var[/b] cell1 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]1[/purple][teal]);[/teal]
  [b]var[/b] e1 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e1[teal].[/teal]type [teal]=[/teal] [green][i]'text'[/i][/green][teal];[/teal]
  e1[teal].[/teal]name [teal]=[/teal] [green][i]'mcpName[highlight][][/highlight]'[/i][/green][teal];[/teal]
  e1[teal].[/teal]id [teal]=[/teal] [green][i]'mcpName'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
[gray]//  e1.size = 40;[/gray]
  cell1[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e1[teal]);[/teal]

  [b]var[/b] cell2 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]2[/purple][teal]);[/teal]
  [b]var[/b] e2 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e2[teal].[/teal]type [teal]=[/teal] [green][i]'text'[/i][/green][teal];[/teal]
  e2[teal].[/teal]name [teal]=[/teal] [green][i]'mcpDesc[highlight][][/highlight]'[/i][/green][teal];[/teal]
  e2[teal].[/teal]id [teal]=[/teal] [green][i]'mcpDesc'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
 [gray]// e2.size = 20;[/gray]
  cell2[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e2[teal]);[/teal]

  [b]var[/b] cell3 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]3[/purple][teal]);[/teal]
  [b]var[/b] e3 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e3[teal].[/teal]type [teal]=[/teal] [green][i]'checkbox'[/i][/green][teal];[/teal]
[gray]//  e3.align = 'MIDDLE';[/gray]
  cell3[teal].[/teal]align [teal]=[/teal] [green][i]'center'[/i][/green][teal];[/teal]
  [highlight]e2[teal].[/teal]name [teal]=[/teal] [green][i]'chkContraint[]'[/i][/green][teal];[/teal][/highlight]
  e3[teal].[/teal]id [teal]=[/teal] [green][i]'chkContraint'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e3[teal].[/teal]onclick[teal]=[/teal] [b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]enableConstraint[/color][teal]([/teal]e3[teal].[/teal]id[teal]);[/teal][teal]}[/teal][teal];[/teal]
  cell3[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e3[teal]);[/teal]

  [b]var[/b] cell4 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]4[/purple][teal]);[/teal]
  [b]var[/b] e4 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e4[teal].[/teal]type [teal]=[/teal] [green][i]'text'[/i][/green][teal];[/teal]
  e4[teal].[/teal]name [teal]=[/teal] [green][i]'mcpContraintValue'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e4[teal].[/teal]id [teal]=[/teal] [green][i]'mcpContraintValue'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e4[teal].[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal]
[gray]//  e4.size = 40;[/gray]
  cell4[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e4[teal]);[/teal]

  [b]var[/b] cell5 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]5[/purple][teal]);[/teal]
  [b]var[/b] e5 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]);[/teal]
  e5[teal].[/teal]type [teal]=[/teal] [green][i]'text'[/i][/green][teal];[/teal]
  e5[teal].[/teal]name [teal]=[/teal] [green][i]'mcpDefault'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e5[teal].[/teal]id [teal]=[/teal] [green][i]'mcpDefault'[/i][/green] [teal]+[/teal] iteration[teal];[/teal]
  e5[teal].[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal]
[gray]//  e5.size = 40;[/gray]
  cell5[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e5[teal]);[/teal]

   [b]var[/b] cell6 [teal]=[/teal] row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal]([/teal][purple]6[/purple][teal]);[/teal]
  [b]var[/b] e6 [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'img'[/i][/green][teal]);[/teal]
  e6[teal].[/teal]src [teal]=[/teal] [green][i]'C:/Documents and Settings/admin/Desktop/minus.gif'[/i][/green][teal];[/teal]
  e6[teal].[/teal]style[teal].[/teal]width[teal]=[/teal][purple]20[/purple][teal];[/teal]
  e6[teal].[/teal]style[teal].[/teal]heigth[teal]=[/teal][purple]20[/purple][teal];[/teal]
  e6[teal].[/teal]onclick[teal]=[/teal] [b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]removeRowFromTable[/color][teal]([/teal][b]this[/b][teal].[/teal]parentNode[teal].[/teal]parentNode[teal].[/teal]rowIndex[teal]);[/teal][teal]}[/teal][teal];[/teal]
[gray]//  e5.name = 'mcpDefault + iteration;[/gray]
[gray]//  e5.id = 'mcpDefault' + iteration;[/gray]
[gray]//  e5.disabled=true;[/gray]
[gray]//  e5.size = 40;[/gray]
  cell6[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]e6[teal]);[/teal]


[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]removeRowFromTable[/color][teal]([/teal]id[teal])[/teal]
[teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal]id[teal]);[/teal]
[gray]//  var tbl = document.getElementById(tableID);[/gray]
 [gray]// var lastRow = tbl.rows.length;[/gray]
 [gray]// if (lastRow > 6) tbl.deleteRow(lastRow - 2);[/gray]
 document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'table'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]deleteRow[/color][teal]([/teal]id[teal]);[/teal]

  [highlight][b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]1[/purple][teal],[/teal]t[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'table'[/i][/green][teal]),[/teal]l[teal]=[/teal]t[teal].[/teal]rows[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal]-[/teal][purple]1[/purple][teal];[/teal]i[teal]++)[/teal][/highlight]
    [highlight]t[teal].[/teal]rows[teal][[/teal]i[teal]].[/teal]cells[teal][[/teal][purple]0[/purple][teal]].[/teal]innerHTML[teal]=[/teal]i[teal]}[/teal][/highlight]

[b]function[/b] [COLOR=darkgoldenrod]enableConstraint[/color][teal]([/teal]chkId[teal])[/teal]
[teal]{[/teal]
    [b]var[/b] rowId[teal]=[/teal] chkId[teal].[/teal][COLOR=darkgoldenrod]substring[/color][teal]([/teal][purple]12[/purple][teal]);[/teal]
    [b]if[/b][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]chkId[teal]).[/teal]checked[teal])[/teal]
    [teal]{[/teal]

    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpContraintValue'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]disabled[teal]=[/teal][b]false[/b][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpDefault'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]disabled[teal]=[/teal][b]false[/b][teal];[/teal]
    [teal]}[/teal]
    [b]else[/b]
    [teal]{[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpContraintValue'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpContraintValue'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]value[teal]=[/teal][green][i]""[/i][/green][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpDefault'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal]
    document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'mcpDefault'[/i][/green][teal]+[/teal]rowId[teal]).[/teal]value[teal]=[/teal][green][i]""[/i][/green][teal];[/teal]
    [teal]}[/teal]
[teal]}[/teal]

[b]</script>[/b]
[highlight][b]<form>[/b][/highlight]
[b]<table[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"table"[/i][/green] [maroon]cellspacing[/maroon][teal]=[/teal][green][i]"0"[/i][/green] [maroon]border[/maroon][teal]=[/teal][green][i]"2"[/i][/green][b]>[/b]
[b]<tbody>[/b]
[b]<tr><td>[/b]ID[b]</td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]>[/b]Name[b]</td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]>[/b]Desc[b]</td><td>[/b]Constraint[b]</td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]>[/b]ConstraintValue[b]</td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]>[/b]DefaultValue[b]</td><td>[/b][red]&nbsp;[/red][b]</td></tr>[/b]
[b]<tr><td>[/b]1[b]</td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpName1"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpName[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDesc1"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpDesc[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [b]></td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkContraint1"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"chkContraint[]"[/i][/green][/highlight] [maroon]onclick[/maroon][teal]=[/teal][green][i]"javascript:enableConstraint(id);"[/i][/green][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpContraintValue1"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDefault1"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"C:/Documents and Settings/admin/Desktop/minus.gif"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Delete Row"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"removeRowFromTable(this.parentNode.parentNode.rowIndex)"[/i][/green] [b]/></td></tr>[/b]
[b]<tr><td>[/b]2[b]</td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpName2"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpName[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDesc2"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpDesc[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green][b]></td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green] [b]><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkContraint2"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"chkContraint[]"[/i][/green][/highlight] [maroon]onclick[/maroon][teal]=[/teal][green][i]"javascript:enableConstraint(id);"[/i][/green][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpContraintValue2"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDefault2"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"C:/Documents and Settings/admin/Desktop/minus.gif"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Delete Row"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"removeRowFromTable(this.parentNode.parentNode.rowIndex)"[/i][/green] [b]/></td></tr>[/b]
[b]<tr><td>[/b]3[b]</td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpName3"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpName[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDesc3"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpDesc[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green][b]></td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green] [b]><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkContraint3"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"chkContraint[]"[/i][/green][/highlight] [maroon]onclick[/maroon][teal]=[/teal][green][i]"javascript:enableConstraint(id);"[/i][/green][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpContraintValue3"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDefault3"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"C:/Documents and Settings/admin/Desktop/minus.gif"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Delete Row"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"removeRowFromTable(this.parentNode.parentNode.rowIndex)"[/i][/green] [b]/></td></tr>[/b]
[b]<tr><td>[/b]4[b]</td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpName4"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpName[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDesc4"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"mcpDesc[]"[/i][/green][/highlight] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green][b]></td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green] [b]><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkContraint4"[/i][/green] [highlight][maroon]name[/maroon][teal]=[/teal][green][i]"chkContraint[]"[/i][/green][/highlight] [maroon]onclick[/maroon][teal]=[/teal][green][i]"javascript:enableConstraint(id);"[/i][/green][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpContraintValue4"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"textbox"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"mcpDefault4"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]disabled[/maroon][b]></td><td><img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"C:/Documents and Settings/admin/Desktop/minus.gif"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"20"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Delete Row"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"removeRowFromTable(this.parentNode.parentNode.rowIndex)"[/i][/green] [b]/></td></tr>[/b]
[b]<tr><td>[/b][red]&nbsp;[/red][b]</td><td>[/b][red]&nbsp;[/red][b]</td><td[/b] [maroon]align[/maroon][teal]=[/teal][green][i]"center"[/i][/green][b]><input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Add"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"javascript:addRow('table');"[/i][/green][b]>[/b][red]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[/red][b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Delete"[/i][/green] [b]></td><td[/b]  [maroon]colspan[/maroon][teal]=[/teal][green][i]"2"[/i][/green][b]>[/b][red]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[/red][b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [b]>[/b][red]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[/red][b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"button"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Cancel"[/i][/green]></td><td>[/b][red]&nbsp;[/red][b]</td><td>[/b][red]&nbsp;[/red][b]</td></tr>[/b]
[b]</tbody>[/b]
[highlight][b]</form>[/b][/highlight]
[b]</html>[/b]

Feherke.
 
Thanks feherke.

That was really helpful.

i have a query. I need to enable/disable a row on click of a checkbox (before ID). and also i need to copy entire table in an array on click of a copy button and pass it to other page is this possible ?

If you can give me the links where i can find some thing related to this would be helpful . I have just started coding (2 months old in JS) so would be really helpful if you can suggest some sites or books for JS/DHTML because my job is more on handling Dynamic data.

Code:
<html>
<h2>Add Row in JavaScript</h2>
<script>

var iteration;

 function addRow(tableID)
{
  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  if (iteration==undefined) iteration=lastRow
  iteration++
  var row = tbl.insertRow(lastRow-1);
  
  var cell0 = row.insertCell(0);
  var e0 = document.createElement('input');
  e0.type = 'checkbox';
  e0.name = 'chkEdit[]';
  e0.id = 'chkEdit' + iteration;
  e0.onclick= function(){editThisRow(e0.id);};
  cell0.appendChild(e0);

  var cell1 = row.insertCell(1);
  var textNode = document.createTextNode(lastRow-1);
  cell1.appendChild(textNode);

  var cell2 = row.insertCell(2);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'mcpName[]';
  e2.id = 'mcpName' + iteration;
  cell2.appendChild(e2);

  var cell3 = row.insertCell(3);
  var e3 = document.createElement('input');
  e3.type = 'text';
  e3.name = 'mcpDesc[]';
  e3.id = 'mcpDesc' + iteration;
  cell3.appendChild(e3);

  var cell4 = row.insertCell(4);
  var e4 = document.createElement('input');
  e4.type = 'checkbox';
  cell4.align = 'center';
  e2.name = 'chkContraint[]';
  e4.id = 'chkContraint' + iteration;
  e4.onclick= function(){enableConstraint(e4.id);};
  cell4.appendChild(e4);

  var cell5 = row.insertCell(5);
  var e5 = document.createElement('input');
  e5.type = 'text';
  e5.name = 'mcpContraintValue' + iteration;
  e5.id = 'mcpContraintValue' + iteration;
  e5.disabled=true;
  cell5.appendChild(e5);

  var cell6 = row.insertCell(6);
  var e6 = document.createElement('input');
  e6.type = 'text';
  e6.name = 'mcpDefault' + iteration;
  e6.id = 'mcpDefault' + iteration;
  e6.disabled=true;
  cell6.appendChild(e6);

   var cell7 = row.insertCell(7);
  var e7 = document.createElement('img');
  e7.src = 'C:/Documents and Settings/admin/Desktop/minus.gif';
  e7.style.width=20;
  e7.style.heigth=20;
  e7.onclick= function(){removeRowFromTable(this.parentNode.parentNode.rowIndex);};
  cell7.appendChild(e7);
}

function removeRowFromTable(id)
{
 document.getElementById('table').deleteRow(id);

  for (var i=1,t=document.getElementById('table'),l=t.rows.length;i<l-1;i++)
    t.rows[i].cells[0].innerHTML=i
}

	//is this the correct way of doing ? is there a better way
function enableConstraint(chkId)
{ alert(chkId);
    var rowId= chkId.substring(12);
    if(document.getElementById(chkId).checked)
    {

    document.getElementById('mcpContraintValue'+rowId).disabled=false;
    document.getElementById('mcpDefault'+rowId).disabled=false;
    }
    else
    {
    document.getElementById('mcpContraintValue'+rowId).disabled=true;
    document.getElementById('mcpContraintValue'+rowId).value="";
    document.getElementById('mcpDefault'+rowId).disabled=true;
    document.getElementById('mcpDefault'+rowId).value="";
    }
}

function editThisRow(chkEditId)
{
	var editRowId= chkEditId.substring(7);
		alert(editRowId);
    if(document.getElementById(chkEditId).checked)
	{
    document.getElementById('mcpName'+editRowId).disabled=false;
    document.getElementById('mcpDesc'+editRowId).disabled=false;
    document.getElementById('chkContraint'+editRowId).disabled=false;
		//this (document.getElementById(('chkContraint'+editRowId).checked)) is not working :-(
		if(document.getElementById(('chkContraint'+editRowId).checked))
		{
		document.getElementById('mcpContraintValue'+editRowId).disabled=false;
		document.getElementById('mcpDefault'+editRowId).disabled=false;	
		}
		else
		{
		document.getElementById('mcpContraintValue'+editRowId).disabled=true;
		document.getElementById('mcpDefault'+editRowId).disabled=true;			
		}
	}
	else
	{
    document.getElementById('mcpName'+editRowId).disabled=true;
    document.getElementById('mcpDesc'+editRowId).disabled=true;
    document.getElementById('chkContraint'+editRowId).disabled=true;
	document.getElementById('mcpContraintValue'+editRowId).disabled=true;
	document.getElementById('mcpDefault'+editRowId).disabled=true;	

	}
	
 
}
function getAllValues()
{
	for (var i=1,t=document.getElementById('table'),l=t.rows.length;i<l-1;i++)
	{
	alert(t.rows[i].cells[1]);
	}
}
</script>
<form>
<table id="table" cellspacing="0" border="2">
<tbody>
<tr><td>&nbsp;</td><td>ID</td><td align="center">Name</td><td align="center">Desc</td><td>Constraint</td><td align="center">ConstraintValue</td><td align="center">DefaultValue</td><td>&nbsp;</td></tr>
<tr><td><input type="checkbox" id="chkEdit1" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>1</td><td><input type="textbox" id="mcpName1" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc1" name="mcpDesc[]" value="" ></td><td align="center"><input type="checkbox" id="chkContraint1" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue1" value="" disabled></td><td><input type="textbox" id="mcpDefault1" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit2" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>2</td><td><input type="textbox" id="mcpName2" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc2" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint2" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue2" value="" disabled></td><td><input type="textbox" id="mcpDefault2" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit3" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>3</td><td><input type="textbox" id="mcpName3" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc3" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint3" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue3" value="" disabled></td><td><input type="textbox" id="mcpDefault3" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit4" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>4</td><td><input type="textbox" id="mcpName4" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc4" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint4" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue4" value="" disabled></td><td><input type="textbox" id="mcpDefault4" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td align="center"><input type="button" value="Add" onclick="javascript:addRow('table');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Edit" onclick="javascript:editThisRow();"></td><td  colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Submit" onclick="javascript:getAllValues();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Cancel"><input type="button" value="Copy"></td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</form>
</html>
 [\code]

Thanks in advance
 
Hi

manishblr1 said:
I need to enable/disable a row on click of a checkbox (before ID).
"enable/disable a row" is undefined in HTML/JavaScript. Only [tt]input[/tt] elements can be disabled. And as disabled [tt]input[/tt]s are not submitted, disabling all [tt]input[/tt]s in a row would be equal in effect with deleting the row. So better give some details about what you want to happen there.
manishblr1 said:
and also i need to copy entire table in an array on click of a copy button and pass it to other page is this possible ?
Why would you involve array here ? Just submit the [tt]form[/tt] to that page.


Feherke.
 
Thanks for replying.
Sorry for not being clear.

scenario :
i have a edit button . when i click on the edit button it checks which checkbox(first column) is clicked . if for example first row (first column) is clicked then that entire row is enabled for editing else an alert msg showing to select a row to edit. if more than one checkbox(first col) is clicked then alert smg showing that select only one row to edit.

I hope i am clear to some extent.

Thanks for suggesting me in copying the table.

Please suggest me some sites/books to master JS.
 
Thanks for replying.
Sorry for not being clear.

scenario :
i have a edit button . when i click on the edit button it checks which checkbox(first column) is clicked . if for example first row (first column) is clicked then that entire row is enabled for editing else an alert msg showing to select a row to edit. if more than one checkbox(first col) is clicked then alert smg showing that select only one row to edit.To some extent i have tried.

Code:
<html>
<h2>Add Row in JavaScript</h2>
<script>

var iteration;

 function addRow(tableID)
{
  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  if (iteration==undefined) iteration=lastRow
  iteration++
  var row = tbl.insertRow(lastRow-1);
  
  var cell0 = row.insertCell(0);
  var e0 = document.createElement('input');
  e0.type = 'checkbox';
  e0.name = 'chkEdit[]';
  e0.id = 'chkEdit' + iteration;
  e0.onclick= function(){editThisRow(e0.id);};
  cell0.appendChild(e0);

  var cell1 = row.insertCell(1);
  var textNode = document.createTextNode(lastRow-1);
  cell1.appendChild(textNode);

  var cell2 = row.insertCell(2);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'mcpName[]';
  e2.id = 'mcpName' + iteration;
  cell2.appendChild(e2);

  var cell3 = row.insertCell(3);
  var e3 = document.createElement('input');
  e3.type = 'text';
  e3.name = 'mcpDesc[]';
  e3.id = 'mcpDesc' + iteration;
  cell3.appendChild(e3);

  var cell4 = row.insertCell(4);
  var e4 = document.createElement('input');
  e4.type = 'checkbox';
  cell4.align = 'center';
  e2.name = 'chkContraint[]';
  e4.id = 'chkContraint' + iteration;
  e4.onclick= function(){enableConstraint(e4.id);};
  cell4.appendChild(e4);

  var cell5 = row.insertCell(5);
  var e5 = document.createElement('input');
  e5.type = 'text';
  e5.name = 'mcpContraintValue' + iteration;
  e5.id = 'mcpContraintValue' + iteration;
  e5.disabled=true;
  cell5.appendChild(e5);

  var cell6 = row.insertCell(6);
  var e6 = document.createElement('input');
  e6.type = 'text';
  e6.name = 'mcpDefault' + iteration;
  e6.id = 'mcpDefault' + iteration;
  e6.disabled=true;
  cell6.appendChild(e6);

   var cell7 = row.insertCell(7);
  var e7 = document.createElement('img');
  e7.src = 'C:/Documents and Settings/admin/Desktop/minus.gif';
  e7.style.width=20;
  e7.style.heigth=20;
  e7.onclick= function(){removeRowFromTable(this.parentNode.parentNode.rowIndex);};
  cell7.appendChild(e7);
}

function removeRowFromTable(id)
{
 document.getElementById('table').deleteRow(id);

  for (var i=1,t=document.getElementById('table'),l=t.rows.length;i<l-1;i++)
    t.rows[i].cells[0].innerHTML=i
}

	//is this the correct way of doing ? is there a better way
function enableConstraint(chkId)
{ 
    var rowId= chkId.substring(12);
	alert(document.getElementById(chkId).checked)
    if(document.getElementById(chkId).checked)
    {

    document.getElementById('mcpContraintValue'+rowId).disabled=false;
    document.getElementById('mcpDefault'+rowId).disabled=false;
    }
    else
    {
    document.getElementById('mcpContraintValue'+rowId).disabled=true;
    document.getElementById('mcpContraintValue'+rowId).value="";
    document.getElementById('mcpDefault'+rowId).disabled=true;
    document.getElementById('mcpDefault'+rowId).value="";
    }
}

function editThisRow(chkEditId)
{
	var editRowId= chkEditId.substring(7);
		alert(editRowId);
    if(document.getElementById(chkEditId).checked)
	{
    document.getElementById('mcpName'+editRowId).disabled=false;
    document.getElementById('mcpDesc'+editRowId).disabled=false;
    document.getElementById('chkContraint'+editRowId).disabled=false;
//		alert(document.getElementById(('chkContraint'+editRowId)).id);
//		if(document.getElementById(('chkContraint'+editRowId).checked))
//		{
	//	document.getElementById('mcpContraintValue'+editRowId).disabled=false;
	//	document.getElementById('mcpDefault'+editRowId).disabled=false;	
	//	}
	//	else
	//	{
	//	document.getElementById('mcpContraintValue'+editRowId).disabled=true;
	//	document.getElementById('mcpDefault'+editRowId).disabled=true;			
	//	}
	var contraintChkId ='chkContraint'+editRowId;
	enableConstraint(contraintChkId);
	}
	else
	{
    document.getElementById('mcpName'+editRowId).disabled=true;
    document.getElementById('mcpDesc'+editRowId).disabled=true;
    document.getElementById('chkContraint'+editRowId).disabled=true;
	document.getElementById('mcpContraintValue'+editRowId).disabled=true;
	document.getElementById('mcpDefault'+editRowId).disabled=true;	

	}
	
 
}
function getAllValues()
{
	for (var i=1,t=document.getElementById('table'),l=t.rows.length;i<l-1;i++)
	{
	alert(t.rows[i].cells[1]);
	}
}
</script>
<form>
<table id="table" cellspacing="0" border="2">
<tbody>
<tr><td>&nbsp;</td><td>ID</td><td align="center">Name</td><td align="center">Desc</td><td>Constraint</td><td align="center">ConstraintValue</td><td align="center">DefaultValue</td><td>&nbsp;</td></tr>
<tr><td><input type="checkbox" id="chkEdit1" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>1</td><td><input type="textbox" id="mcpName1" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc1" name="mcpDesc[]" value="" ></td><td align="center"><input type="checkbox" id="chkContraint1" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue1" value="" disabled></td><td><input type="textbox" id="mcpDefault1" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit2" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>2</td><td><input type="textbox" id="mcpName2" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc2" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint2" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue2" value="" disabled></td><td><input type="textbox" id="mcpDefault2" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit3" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>3</td><td><input type="textbox" id="mcpName3" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc3" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint3" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue3" value="" disabled></td><td><input type="textbox" id="mcpDefault3" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td><input type="checkbox" id="chkEdit4" name="chkEdit[]" onclick="javascript:editThisRow(id);"></td><td>4</td><td><input type="textbox" id="mcpName4" name="mcpName[]" value="" ></td><td><input type="textbox" id="mcpDesc4" name="mcpDesc[]" value=""></td><td align="center" ><input type="checkbox" id="chkContraint4" name="chkContraint[]" onclick="javascript:enableConstraint(id);"></td><td><input type="textbox" id="mcpContraintValue4" value="" disabled></td><td><input type="textbox" id="mcpDefault4" value="" disabled></td><td><img src="C:/Documents and Settings/admin/Desktop/minus.gif" height="20" width="20" alt="Delete Row" onclick="removeRowFromTable(this.parentNode.parentNode.rowIndex)" /></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td align="center"><input type="button" value="Add" onclick="javascript:addRow('table');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Edit" onclick="javascript:editThisRow();"></td><td  colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Submit" onclick="javascript:getAllValues();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Cancel"><input type="button" value="Copy"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</form>
</html>
[\code]

Thanks for suggesting me in copying the table.

 Please suggest me some sites/books to master JS.
 
Hi

If exactly one checkbox has to be checked, then why not use radio buttons instead ?

My personal preference is separate edit button in each row. That way is clear to which one applies and the user not has to scroll between the checkbox and the button at the bottom of the table if the table is longer than one screen.

And while the [tt]input[/tt]s are already there, what do you need to enable for editing ? The user can just fill any [tt]input[/tt] like in spreadsheet editors can fill any cell.

Regarding sites or books, sorry I know none. The site I used most is probably Mozilla Developer Network.


Feherke.
 
when i open this page, if there is any data then that data will be displayed here.(the data can be more than 4 rows). by defalut all the fields which come from database will be disabled. by clicking (checkbox/radiobutton :first column) that particular row should be enabled.

I also need to alert content of each cell in a forloop (is this possible? because my first 4 rows are static. )
 
when i open this page, if there is any data(from database) then that data will be displayed here.(the data can be more than 4 rows). by defalut all the fields which come from database will be disabled. By clicking (checkbox/radiobutton :first column) that particular row should be enabled.

I also need to alert content of each cell in a forloop (is this possible? because my first 4 rows are static. )

I have no idea as to how to tackle this issue: if the rows(coming from database) has more than 4 rows then how can i accomodate here. (is it possible to generate table based on the length (no of rows) from the database . else show 4 rows by defalut if no data is there in the database.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top