Javascript changing position of button in screen
Trying to change the position of a dynamically generated column in a row
Need to change the position of Delete button to the end.
working script with delete at the left end
<HTML>
<HEAD>
<SCRIPT>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "button";
var btnName = "button" + (rowCount + 1);
element1.name = btnName;
element1.setAttribute('value', 'Delete'); // or element1.value = "button";
element1.onclick = function () { removeRow(btnName); } ;
cell1.appendChild(element1);
//Column 2
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
//Column 3
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
}
function removeRow(btnName) {
try {
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var rowObj = row.cells[0].childNodes[0];
if (rowObj.name === btnName) {
table.deleteRow(i);
rowCount--;
}
}
}
catch (e) {
alert(e);
}
}
</SCRIPT>
</head>
<body>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>
<TD>1</TD>
<TD><input type="text" value="" name="nameTxt"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Modified Version
<HTML>
<HEAD>
<SCRIPT>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 2
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 1;
//Column 3
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
//Column 1
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
var btnName = "button" + (rowCount + 1);
element3.name = btnName;
element3.setAttribute('value', 'Delete'); // or element1.value = "button";
element3.onclick = function () { removeRow(btnName); } ;
cell3.appendChild(element3);
alert(btnName);
}
function removeRow(btnName) {
try {
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var rowObj = row.cells[2].childNodes[2];
if (rowObj.name === btnName) {
table.deleteRow(i);
rowCount--;
}
}
}
catch (e) {
alert(e);
}
alert(btnName);
}
</SCRIPT>
</HEAD>
<BODY>
<form action="AddnewcustProgram.jsp">
<TABLE id="dataTable">
<TR>
<TD>1</TD>
<TD><input type="text" value="" name="nameTxt"></TD>
<TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>
</TR> </TABLE>
<table>
<tr>
<td>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /></td>
<td>
<input type="submit" value="Execute" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Tried to modify the script like above. But delete is not working while clicking on it. Kindly let me know if need any further details. Thanks alot for any support.
Change this
var rowObj = row.cells[2].childNodes[2];
to this
var rowObj = row.cells[2].childNodes[0];