CODEWITHSUNDEEP
javascriptjqueryhtml
Bhumi Patel
Bhumi Patel

Reputation: 35

Add Table Row Button on Click

I want new row on button click.

<html>
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button" value="Add another line" onclick="addField(this);" />
</html>

javascript : 

window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
     var p=o.parentNode.parentNode;
     p.parentNode.removeChild(p);
}

When i click first time on submit button, whole table is insert and after that i click second time on submit button only <tr> is insert in existing table.

Upvotes: 1

Views: 24725

Answers (2)

KIMB-technologies
KIMB-technologies

Reputation: 889

Without jQuery you can use this JS function

function addField( table ){

  var tableRef = document.getElementById(table);
  var newRow   = tableRef.insertRow(-1);

  var newCell  = newRow.insertCell(0);
  var newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "links");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(1);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "keywords");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(2);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "violationtype");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(3);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("type", "button");
  newElem.setAttribute("value", "Delete Row");
  newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)')
  newCell.appendChild(newElem);
}

And you have to call it like this:
(Don't use addField( this ), define the ID of the table where the row should be added addField( tableID ))

<html>
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button" value="Add another line" onclick="addField('tbl');" />

Here is the fiddle: https://jsfiddle.net/s5jx0ftg/

Upvotes: 0

Sravan
Sravan

Reputation: 18647

Try this,Add a class to the add row button(eg: add_another)

$('document').ready(function() {
  $('.add_another').click(function() {
      $("#tbl").append('<tr><td><input type="text" class="txtbox" value="" />  </td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
   });
})
<html>
<head>
  <script   src="https://code.jquery.com/jquery-1.12.1.js"   integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8="   crossorigin="anonymous"></script>
</head>  
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button add_another" value="Add another line"/>
</html>

Here is the fiddle

Upvotes: 5

Related Questions