Javascript to add button to next row in a table

I am trying to get an add button to appear on the next row of each row when the add button is clicked. currently I am getting an empty te开发者_JAVA技巧xtfield in the cell where I would like the add button to appear. what would i have to change in my code to get the add button instead of the text field when the add button is clicked?

For the add button's JavaScript I currently have:

     // button cell
  var cellRightSel = row.insertCell(3);
  var bt = document.createElement('input');
  bt.name = 'addBt' + iteration;
  bt.id = 'addBt' + iteration; 
  cellRightSel.appendChild(bt);

and the html for the page is:

<table border="1" id="tblSample">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>

<td><input type="text" name="txtRow1"
 id="txtRow1" size="40"  /></td>



<td><input type="text" name="txtRow2"
 id="txtRow3" size="40"  /></td>



<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>


<td><input type="button" value="Add" onclick="addRowToTable();" name="addBt0" /></td>


</tr>
</table>

---

bt.type = "button"

You forgot to make it a button.

Alternatively you could do

var bt = document.createElement('button');

to make a <button> instead.