Log in

View Full Version : Dynamic Table in DOM (Add/Remove Rows)


codexomega
08-13-2005, 09:45 PM
Hello!
I have some basic form to manage some data, using HTML table. For the final application, user will complete table's rows, click on Submit ans all the data will be transmited and recorded in the DataBase. But that is not for now.
I can add rows with inputs to my HTML table dynamically using DOM, but I cannot remove selected rows. In fact, every row contains a checkbox. So, user selects the rows to remove, clicks the Remove Row button and selected rows must be removed.
Here is my code:
-------------------------
[CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bookmarks Manager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<script language="javascript">

function checkAll(form){
for (var i = 1; i < form.elements.length; i++){
eval("form.elements[" + i + "].checked = form.elements[0].checked");
}
}

// - The new row function
var i=0;
function addRow(){

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);
i++;
//alert("i= " +i);
//alert(row.innerHTML);
}

function delRow(button){
//recuperation des lignes coches
var v_checkbox = document.form1.list;
var nb_checked = 0;

/*for(i = 0 ; i < v_checkbox.length; i++){
alert(i);
if(v_checkbox[i].checked == true)
nb_checked++;
}

alert(nb_checked);*/
//
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}

</script>
</head>

<body>
<h1>Bookmarks Manager
</h1>
<hr />
<form name="form1" id="form1" method="post" action="">
<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)"/>
</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="cbo_category" >
<option>Computer</option>
<option>Graphic Design</option>
<option>Electronic Libraries</option>
</select>
</td>
<td align="center">
<select name="cbo_language">
<option>English</option>
<option>French</option>
<option>Russian</option>
<option>Africaans</option>
</select>
</td>
<td align="center"><input name="bmk_link" type="text" id="bmk_link" /></td>
</tr>
</tbody>
</table>

<p>&nbsp;</p>

</form>
</body>
</html>

CODE]
bugsbunny
12-12-2007, 06:51 AM
hi...
even i am also doing the same type of application..
i am also unable to remove the dynamically added row...
so if u find any solution please forward the solution to me also...
i am really need this one...
so if u found any solution just send me a solution to
naveenkandula@yahoo.co.in


waiting for your reply..
Thanking you
Naveen Kumar.K
aliciahew
10-22-2008, 02:43 AM
Hi codexomega,

thanks for code sharing.

I solved remove row ..not sure will it be using now ( after 1 year ):)

[CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bookmarks Manager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<script language="javascript">

function checkAll(form){
for (var i = 1; i < form.elements.length; i++){
eval("form.elements[" + i + "].checked = form.elements[0].checked");
}
}

// - The new row function
var i=1;
function addRow(){

var tbody = document.getElementById("table1").tBodies[0];
var row = document.createElement("TR");
row.setAttribute("id","row"+i);
alert (i);
//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);
i++;
//alert("i= " +i);
//alert(row.innerHTML);
}

function delRow(button){
//recuperation des lignes coches
var v_checkbox = document.form1.list;
var nb_checked = 0;

/*for(i = 0 ; i < v_checkbox.length; i++){
alert(i);
if(v_checkbox[i].checked == true)
nb_checked++;
}

alert(nb_checked);*/
//
var row = button.parentNode.parentNode;
//var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
var rowNum = i-1;
var rowID = "row"+rowNum;
alert (rowID);

var rowToDelete = document.getElementById(rowID);

rowToDelete.parentNode.removeChild(rowToDelete);


//tbody.removeChild(row);
}

</script>
</head>

<body>
<h1>Bookmarks Manager
</h1>
<hr />
<form name="form1" id="form1" method="post" action="">
<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)"/>
</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 id="row"+i>
<td align="center"><input type="checkbox" name="list" value="0" /></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="cbo_category" >
<option>Computer</option>
<option>Graphic Design</option>
<option>Electronic Libraries</option>
</select></td>
<td align="center">
<select name="cbo_language">
<option>English</option>
<option>French</option>
<option>Russian</option>
<option>Africaans</option>
</select></td>
<td align="center"><input name="bmk_link" type="text" id="bmk_link" /></td>
</tr>
</tbody>
</table>

<p>&nbsp;</p>

</form>
</body>
</html>
Kondalarao.n
11-04-2008, 10:33 AM
Hi ,

I am also facing the same problem.This code is not working.Have you properly tested the code.It is deleting only one row.after that some javascript error is coming.Any help is appriciated.


Thanks
kondal