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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Add /Delete rows in HTML table with JavaScript

Last accessed pages

  1. innerHTML and outerHTML to Get and Replace HTML content (17554)
  2. Node.js Move and Copy file (3517)
  3. Add, Change, and Remove Attributes with jQuery (36000)
  4. Python Programming (699)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (71507)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (447)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (320)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)