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 attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
Add /Delete rows in HTML table with JavaScript

Last accessed pages

  1. Register and show online users and visitors (30283)
  2. jQuery ajax() method (16137)
  3. HTML Course - Free Lessons (12775)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (51026)
  5. Node.js Move and Copy Directory (6000)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (720)
  2. Contact page - CoursesWeb (703)
  3. Tabs effect with CSS (700)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (231)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (172)