The script presented in this page it is a JavaScript object that can be used to
Add and Delete dinamically rows with input fields in HTML table.
- The new row in table is added directly after the clicked row.
- The columns with rows index (ID) must have the class "tbl_id".
- The input text fields added in table columns has the name with "[]" (tn1[]), so, the value of those input fields can be easily stored and passed as an array to a script on server.
Script code - click to select it
<table id="table1" border="1">
<tr><th>ID</th><th>Col-1</th><th>Col-2</th><th>Delete</th><th>Add Rows</th></tr>
<tr>
<td class="tbl_id">1</td><td><input type="text" name="tm1[]"/></td><td><input type="text" name="nm2[]"/></td>
<td><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
</table>
<div><input type="button" value="Add Row at end" onclick="ob_adRows.addRow()"/></div>
<script>
//JS class to add/delete rows in html table - https://coursesweb.net/javascript/
//receives table id
function adRowsTable(id){
var table = document.getElementById(id);
var me = this;
if(document.getElementById(id)){
var row1 = table.rows[1].outerHTML;
//adds index-id in cols with class .tbl_id
function setIds(){
var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
}
//add row after clicked row; receives clicked button in row
me.addRow = function(btn){
btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
setIds();
}
//delete clicked row; receives clicked button in row
me.delRow = function(btn){
btn.parentNode.parentNode.outerHTML ='';
setIds();
}
}
}
//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>
- Demo:
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net