CODEWITHSUNDEEP
javascripthtmlhtml-table
Rataiczak24
Rataiczak24

Reputation: 1042

Clone an HTML Row without previous entered text

I have the following HTML and JAVASCRIPT code. Right now, I can dynamically add rows but it also clones the data already entered. How can I clone it with the textfields being blank? Any advice would be greatly appreciated!

HTML:

<div align="center" id="border">
<p>
<div id="rebate_400p">
<strong>400P</strong><br>
</div>

<table id="tables" cellspacing="5">
    <tr align="center" id="table_titles">
        <td>Tier</td>
        <td>Purchase Minimum</td>
        <td>Multiplier</td>
        <td>UOM</td>
        <td>Retro</td>
        <td>Guaranteed</td>
        <td>Paid</td>
        <td>Delete?</td>
        <td>Add Row</td>
    </tr>
    <tr>
        <td align="center" name="tier">1</td>
        <td><input type="text" id="rebate_tables" name="purchase_minimum"></td>
        <td><input type="text" id="rebate_tables" name="multiplier"></td>
        <td><input type="text" id="rebate_tables" name="uom"></td>
        <td><input type="text" id="rebate_tables" name="retro"></td>
        <td><input type="text" id="rebate_tables" name="guaranteed"></td>
        <td><input type="text" id="rebate_tables" name="paid"></td>
        <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
        <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
    </tr>
</table>
</p>

JAVASCRIPT:

function deleteRow(row)
{
    var i=row.parentNode.parentNode;
    i.parentNode.removeChild(i);
}

function insRow()
{

    console.log( 'hi');
    var x=document.getElementById('tables');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.appendChild(new_row)
}

Upvotes: 1

Views: 87

Answers (2)

Parithiban
Parithiban

Reputation: 1666

You can try this

function deleteRow(row)
{
    var i=row.parentNode.parentNode;
    i.parentNode.removeChild(i);
}

function insRow()
{
    var x=document.getElementById('tables');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    
    Array.prototype.slice.call(
          new_row.querySelectorAll('input[type=text]'))
          .forEach(function (el) {
            el.value = '';
        });

    x.appendChild(new_row)
}
<div align="center" id="border">
<p>
<div id="rebate_400p">
<strong>400P</strong><br>
</div>

<table id="tables" cellspacing="5">
    <tr align="center" id="table_titles">
        <td>Tier</td>
        <td>Purchase Minimum</td>
        <td>Multiplier</td>
        <td>UOM</td>
        <td>Retro</td>
        <td>Guaranteed</td>
        <td>Paid</td>
        <td>Delete?</td>
        <td>Add Row</td>
    </tr>
    <tr>
        <td align="center" name="tier">1</td>
        <td><input type="text" id="rebate_tables" name="purchase_minimum"></td>
        <td><input type="text" id="rebate_tables" name="multiplier"></td>
        <td><input type="text" id="rebate_tables" name="uom"></td>
        <td><input type="text" id="rebate_tables" name="retro"></td>
        <td><input type="text" id="rebate_tables" name="guaranteed"></td>
        <td><input type="text" id="rebate_tables" name="paid"></td>
        <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
        <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
    </tr>
</table>
</p>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use querySelectorAll to get all inputs with type text then loop through them and edit the value ::

function deleteRow(row)
{
  var i=row.parentNode.parentNode;
  i.parentNode.removeChild(i);
}

function insRow()
{

  console.log( 'hi');
  var x=document.getElementById('tables');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  
  var inputs = new_row.querySelectorAll('input[type=text]');
  
  for(var i=0;i<inputs.length;i++)
    inputs[i].value='';
  
  
  x.appendChild(new_row)
}
<div align="center" id="border">
  <p>
  <div id="rebate_400p">
    <strong>400P</strong><br>
  </div>

  <table id="tables" cellspacing="5">
    <tr align="center" id="table_titles">
      <td>Tier</td>
      <td>Purchase Minimum</td>
      <td>Multiplier</td>
      <td>UOM</td>
      <td>Retro</td>
      <td>Guaranteed</td>
      <td>Paid</td>
      <td>Delete?</td>
      <td>Add Row</td>
    </tr>
    <tr>
      <td align="center" name="tier">1</td>
      <td><input type="text" id="rebate_tables" name="purchase_minimum"></td>
      <td><input type="text" id="rebate_tables" name="multiplier"></td>
      <td><input type="text" id="rebate_tables" name="uom"></td>
      <td><input type="text" id="rebate_tables" name="retro"></td>
      <td><input type="text" id="rebate_tables" name="guaranteed"></td>
      <td><input type="text" id="rebate_tables" name="paid"></td>
      <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
      <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
    </tr>
  </table>
  </p>

Upvotes: 1

Related Questions