Entry
How can I add and remove rows by only know which cell I've just click or an element I have clicked on within that cell...?
Dec 24th, 2004 02:44
kibble,
<html>
<head>
<script type="text/javascript">
<!--
function formatTable(oTable) {
var rows = document.all(oTable).rows;
for (var i = 0; i < rows.length; i++) {
rows[i].setAttribute('id', i);
if (i % 2 == 0) {
rows[i].style.backgroundColor = "#EFFBFF";
rows[i].style.color = "000000";
} else {
rows[i].style.backgroundColor = "#F2F2FF";
rows[i].style.color = "black";
}
}
}
function deleteRow(tbl, tableID) {
var table = document.all ? document.all[tableID] :
document.getElementById(tableID);
var obj = tbl.parentNode;
var r = obj.parentNode;
table.deleteRow(r.getAttribute('id'));
formatTable(tableID);
}
function addRowDOM (tableID) {
/** pass every cell content as a futher arg */
var table = document.all ? document.all[tableID] :
document.getElementById(tableID);
var lastRow = table.rows.length;
if (arguments.length > 1) {
var row = table.insertRow(table.rows.length);
if (document.all) {
for (var i = 1; i < arguments.length; i++) {
var cell = row.insertCell(i - 1);
if (i % 3 == 0) {
cell.innerHTML = '<a
href="javascript:void(0)" onclick="deleteRow(this, \'table1
\')">Delete<\a>';
} else if (i % 3 == 2) {
cell.innerHTML = '<textarea
name="cvalue2" cols="" rows="">' + arguments[i] + '</textarea> ';
} else {
cell.innerHTML = '<input
name="cfield1" type="text" value="' + arguments[i] + '">';
}
}
} else if (document.getElementById) { /** will not
work for NN6 */
/** NN6 bug inserting cells in wrong sequence */
window.alert("Sorry you can not use this
feature in any other browser but IE");
}
}
formatTable(tableID);
}
//-->
</script>
</head>
<body onLoad="formatTable('table1')">
<input name="AddRow" type="button" value="Add Row [DOM Method]"
onClick="addRowDOM
('table1', 'JavaScript.FAQTs.com', 'www.FAQTs.com', 'deleterow');">
<table width="100%" border="0" cellspacing="1" cellpadding="3"
align="center" id="table1">
<tr>
<td>test field non editable</td>
<td>test value non editable</td>
<td>test value non editable</td>
</tr>
</table>
</body>
</html>
