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:
IDCol-1Col-2DeleteAdd Rows
1

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Add /Delete rows in HTML table with JavaScript

Last accessed pages

  1. PHP-MySQL Scripts (3977)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (74778)
  3. Pagination Class - Script to paginate content (1727)
  4. Simple Admin Login PHP Script (1384)
  5. Ajax-PHP Chat Script (38162)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (697)
  2. Read Excel file data in PHP - PhpExcelReader (625)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (394)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (350)
  5. PHP getElementById and getElementsByTagName (312)