点击按钮自动添加行 + 点击按钮，将行变为可输入的文本框

点击添加按钮   自动添加行

<table id="table_id">

<tr>

<td>姓名</td>

<td>性别</td>

<td>年龄</td>

<td>地址</td>

<td>爱好</td>

</tr>

<tr>

<td id="item0">张三</td>

<td id="item1">男</td>

<td id="item2">18</td>

<td id="item3">南京</td>

<td id="item4">学习</td>

</tr>

</table>

<input type="button" value="添  加" onclick="addrow()" style="margin-left:180px;"/>

<input id="button" type="button" value="修改" onclick="changeInput()"/>

function addrow()
{
var tr = document.createElement('tr');
       var cellsNum = table_id.rows[0].cells.length;
       for(var j = 0 ; j < cellsNum ; j++)
       {
          var td = document.createElement('td');
          td.innerHTML='<input type="text" value=""/>';
          tr.appendChild(td);
       }
       table_id.tBodies[0].appendChild(tr);

}

function changeInput()
{
var button = document.getElementById("button").value; 
document.getElementById("button").value ="保存";    //点击修改按钮后，将修改变为保存

var item0 = document.getElementById("item0");    
var item1 = document.getElementById("item1");

  var itemA = item0.innerHTML;
  var itemB = item1.innerHTML;
 
  item0.innerHTML = "<input style='width:200px;' type='text' value='" + itemA + "'/>";
  item1.innerHTML = "<input style='width:150px;' type='text' value='" + itemB + "'/>";
 
}