在html表中添加新的可编辑行？

Question

我设计了一个可编辑的网格（包含两个文本框和一个组合框的表），它从XML文件中读取数据并在网格中显示数据。用户可以添加另一个可编辑行并输入数据。我通过复制前一行动态添加了一行，但问题是添加的行不可编辑。如何将新添加的行更改为可编辑？

var tob = document.getElementById('tabe');
var rowCoun = tob.rows.length;
rowCoun = rowCoun - 1;
var rowCount = tob.rows.length;
var row = tob.insertRow(rowCount);
var colCount = tob.rows[1].cells.length;
for(var i=0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = tob.rows[rowCount - 1].cells[i].innerHTML;
}

function insertRow() {
  var tob = document.getElementById('tabe');
  var rowCoun = tob.rows.length;
  rowCoun = rowCoun - 1;
  var rowCount = tob.rows.length;
  var row = tob.insertRow(rowCount);
  var colCount = tob.rows[1].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = tob.rows[rowCount - 1].cells[i].innerHTML;
  }
}

<table id="tabe">
  <tr>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>
      <select>
        <option>Foo</option>
        <option>Bar</option>
      </select>
    </td>
  </tr>
</table>
<button onclick="insertRow()">Insert row</button>