0

I'm working on a project where I'm creating a table of items. It looks like so:

<table>
  <tr>
    <th>Priority</th>
    <th>Item</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text"><br></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input type="text"></td>
  </tr>
<tr>
    <td>3</td>
    <td><input type="text"></td>
  </tr>
<tr>
    <td>4</td>
    <td><input type="text"></td>
  </tr>
<tr>
    <td>5</td>
    <td><input type="text"></td>
  </tr>
</table>
<script type = "text/javascript">
</script>

</head>
<body>
</body>
</html>

I want to have a button that will add another row with the next number and space to imput data. Is there anyway to write that in a loop using Javascript?

retrogirl19
  • 121
  • 10
  • possible duplicate of [How to Copy Table Row with clone in jquery and create new Unique Ids for the controls](http://stackoverflow.com/questions/3504499/how-to-copy-table-row-with-clone-in-jquery-and-create-new-unique-ids-for-the-con) – Jay Jan 31 '15 at 23:11

1 Answers1

0

How about: 

 <table id="specialtable">
  <tr>
    <th>Priority</th>
    <th>Item</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text"><br></td>
    <td><button onclick="addRow(this);">Add</button><br></td>    
  </tr>
</table>


<script type = "text/javascript">  
function addRow(e) {
  var current = e.parentNode.parentNode; // <tr>...</tr>
  var tnew = current.cloneNode(true);
  var rowCount = current.parentNode.getElementsByTagName("tr").length;
  tnew.getElementsByTagName("td")[0].textContent = rowCount;
  current.parentNode.appendChild(tnew);
}  
</script>
</head>
<body>
</body>
</html>