Dynamic Table in DOM (Add/Remove Rows)

codexomega · #1 (**permalink**) 08-16-05, 12:43 PM

Hi!
I'm developing a form, containing table rows with inputs.
That's for adding data to the DataBase.
Scenario:
User want to add 3 records to the DB, he clicks 2 times on AddRow button,
2 rows are added dynamically to the HTML table. He thinks that he made a mistake and want to remove 1 row from HTML table, so he selects the row with checkbox and clicks on RemoveSelectedRows button. The selected rows are dynamically deleted from HTML table.
And after, it's about submitting the form.
I have some code for adding rows, but I don't know how to remove the selected ones.
----------------------
// - The new row function
var i=0;
function addRow(){
var table = document.getElementById("table1");
var tbody = document.getElementById("table1").tBodies[0];
var row = document.createElement("TR");
//Cell 1
var cell1 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
inp1.setAttribute("type","checkbox");
inp1.setAttribute("name","list");
inp1.setAttribute("value", i);
cell1.appendChild(inp1);
//Cell 2
var cell2 = document.createElement("TD");
cell2.setAttribute("align","center");
var inp2 = document.createElement("INPUT");
inp2.setAttribute("type","text");
inp2.setAttribute("name","bmk_name" + i);
cell2.appendChild(inp2);
//Cell 3
var cell3 = document.createElement("TD");
cell3.setAttribute("align","center");
var inp3 = document.createElement("TEXTAREA");
inp3.setAttribute("name","bmk_description" +i);
inp3.setAttribute("cols","20");
inp3.setAttribute("rows","3");
cell3.appendChild(inp3);
//Cell 4
var cell4 = document.createElement("TD");
cell4.setAttribute("align","center");
cell4.innerHTML="<select name='cbo_category' +i >" +
"<option>Computer</option>" +
"<option>Graphic Design</option>" +
"<option>Electronic Libraries</option>" +
"</select>";
//Cell 5
var cell5 = document.createElement("TD");
cell5.setAttribute("align","center");
cell5.innerHTML="<select name='cbo_language' +i >" +
"<option>English</option>" +
"<option>French</option>" +
"<option>Russian</option>" +
"</select>";
//Cell 6
var cell6 = document.createElement("TD");
cell6.setAttribute("align","center");
var inp6 = document.createElement("INPUT");
inp6.setAttribute("type","text");
inp6.setAttribute("name","bmk_link" +i);
cell6.appendChild(inp6);
//
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
tbody.appendChild(row);
table.appendChild(tbody);
i++;
//alert("i= " +i);
//alert(row.innerHTML);
}

<body>
<h1>Bookmarks Manager
</h1>
<hr />
<form name="form1" id="form1" method="post" action="manage_bookmarks.php">
<div>
<input name="add_row" type="button" id="add_row" value="Add Row" onclick="addRow()" />
<input name="del_row" type="button" id="del_row" value="Remove Row" onclick="delRow(this)"/>
<input name="submit" type="submit" value="Add Record"/>

</div>
<table id="table1" width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<th bgcolor="#660066"><input type="checkbox" name="check_all" value="check_all" onclick="checkAll(this.form)"/></th>
<th bgcolor="#0000FF"><span class="style1">Name</span></th>
<th bgcolor="#0000FF"><span class="style1">Description</span></th>
<th bgcolor="#0000FF"><span class="style1">Category</span></th>
<th bgcolor="#0000FF"><span class="style1">Language</span></th>
<th bgcolor="#0000FF"><span class="style1">Link</span></th>

</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="list" value="1" /></td>
<td align="center"><input type="text" name="bmk_name"/></td>
<td align="center"><textarea name="bmk_description" cols="20" rows="3"></textarea></td>
<td align="center">
<select name="bmk_category" id="bmk_category" >
<option value="computer">Computer</option>
<option value="graphic design">Graphic Design</option>
<option value="electronic libraries">Electronic Libraries</option>
</select>
</td>
<td align="center">
<select name="bmk_language" id="bmk_language">
<option value="en">English</option>
<option value="fr">French</option>
<option value="ru">Russian</option>
</select>
</td>
<td align="center"><input name="bmk_link" type="text" id="bmk_link" /></td>
</tr>
</tbody>
<tfoot><tr><td></td></tr></tfoot>
</table>

<p> </p>

</form>
</body>