Category Archives: Dynamic TR add/remove

Javascript – Add/Remove table rows

<HTML>
<HEAD>
<TITLE> Javascript – Add/Remove table rows </TITLE>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<style type=”text/css”>
body, table, td, p {
font-family: Trebuchet MS, Tahoma;
font-size: 12px;
}
</style>
<script language=”javascript” type=”text/javascript”>
function addRow() {
var visi_insertrowid = parseInt(document.getElementById(‘hid_visiblefields_index’).value);
var visi_lastrowvalue = parseInt(document.getElementById(‘hid_visiblefields_value’).value);
var _table = document.getElementById(‘tbl_visiblefields’).insertRow(visi_insertrowid);
var cell0 = _table.insertCell(0);
var cell1 = _table.insertCell(1);
cell0.innerHTML = ‘<input type=”file” name=”txt_pictures[]”>';
cell1.innerHTML = ‘<a href=”javascript:void(0);” onClick=”javascript:return removeRow(this);”>Remove</a>';
document.getElementById(‘hid_visiblefields_index’).value = visi_insertrowid +1;
document.getElementById(‘hid_visiblefields_value’).value = visi_lastrowvalue+1;
return false;
}

function removeRow(rows) {
var browsername = navigator.appName;
if(browsername.indexOf(“Microsoft”)!=-1)
var _row = rows.parentElement.parentElement;
else
var _row = rows.parentNode.parentNode;
document.getElementById(‘tbl_visiblefields’).deleteRow(_row.rowIndex);
document.getElementById(‘hid_visiblefields_index’).value = parseInt(document.getElementById(‘hid_visiblefields_index’).value) – 1;
return false;
}
</script>
</HEAD>
<BODY>
<TABLE border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%” height=”100%”>
<TR>
<TD align=”center”>
<form name=”frmTest” id=”” action=”” method=”post”>
<input type=”hidden” name=”hid_visiblefields_index” id=”hid_visiblefields_index” value=”1″>
<input type=”hidden” name=”hid_visiblefields_value” id=”hid_visiblefields_value” value=”0″>
<table border=”0″ cellpadding=”0″ cellspacing=”5″>
<tr>
<td width=”100″>Name</td>
<td width=”30″ align=”center”>:</td>
<td><input type=”text” name=”txt_name” style=”width:100px;”></td>
</tr>
<tr>
<td>Pictures</td>
<td align=”center”>:</td>
<td>
<table border=”0″ cellpadding=”0″ cellspacing=”5″ id=”tbl_visiblefields”>
<tr>
<td><input type=”file” name=”txt_pictures[]”></td>
<td><a href=”javascript:void(0);” onClick=”javascript:return addRow(this);”>Add</a></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Output:

Download code: Click here

Follow

Get every new post delivered to your Inbox.

Join 158 other followers