manishblr1
Programmer
Hi here goes my code
i need the alignment of the checkbox to be center which is created on click of a Add button .
Thanks in advance.
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> </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> </td><td> </td><td align="center"><input type="button" value="Add" onclick="javascript:addRow('table');"> <input type="button" value="Delete" ></td><td colspan="2"> <input type="button" value="Submit" > <input type="button" value="Cancel"></td><td> </td><td> </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.