To add or remove html row here i am explaining with simple javascript and html. We can use Jquery and other stuff but it’s just to clear out basic concept by this you can develop your own logic with advance part.
Create a simple HTML Table
<table id=”dataTable” width=”350px” border=”1″>
<tr>
<td><INPUT type=”checkbox” name=”chk”/></td>
<td> 1 </td>
<td> <INPUT type=”text” /> </td>
</tr>
</table>
I am giving id to table for future use. By this id we can identify in which table we have to add or remove row
Now create a javascript function for add and remove row like below
<SCRIPT language=”javascript”>
// adding a new row in table with given ID -tableID
function addRow(tableID) {
// create a object of table with given id to access all attributes of the table
var table = document.getElementById(tableID);
// count total existing row in that table
var rowCount = table.rows.length;
// create new row object according to next counting in table
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
// cretae an element if you want to insert in column like here creating check box for first column
var element1 = document.createElement(“input”);
element1.type = “checkbox”;
// append this element to first column of row
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement(“input”);
element2.type = “text”;
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount–;
i–;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
Now add button to perform this javascript action
<input type=”button” value=”Add Row” onClick=”addRow(‘dataTable’)” />
<input type=”button” value=”Delete Row” onClick=”deleteRow(‘dataTable’)” />
passing table id in add or remove function.
It’s done with only javascript and html part. You can do more effectively and quickly short, with jquery or ajax.
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016