js编辑table td

1、table的view界面：



2、转为edit界面：



3、保存后的界面：



4、在保存的时候，可以把整个html传递到后台；

<table id="table" class="ke-zeroborder" cellspacing="0" cellpadding="0" border="1">
<tbody>

<tr>
<td class="A">操作</td>
<td class="A">序号</td>
<td class="A">风险事件归类</td>

</tr>

</tbody>

</table>

<input type="button" value="编辑" name="edit" onclick="edit()"></input>

<input type="button" value="保存" name="save" onclick="mySave()"></input>

<script>

 function test(obj) 

 {   

 

  var R1InnerHtml ='<tr class="R1"><td>  </td><td></td><td> </td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';

 

  var myStyle = '<style type="text/css">.A{width:90px;height:35px;}</style>';

 

  var classFlag = obj.name;

 

  var rowStartIndex = obj.parentNode.parentNode.rowIndex ;

  var rowChildCount = document.getElementsByClassName(classFlag).length;

  var rowLocated    = rowStartIndex + rowChildCount;

 

  var tableObj  = document.getElementById("table");
var rowNew = tableObj.insertRow(rowLocated);

 

rowNew.innerHTML = R1InnerHtml;

 }

 

  function edit(){

     var tdObj = document.getElementsByTagName("td");

     for(var i = 0 ; i<tdObj.length; i++){

    curObj = tdObj[i];     

    curObj.innerHTML = "<input type='text' value='" + curObj.innerText + "' name='b'/>";

  }

  }

  

  

   function mySave(){

     var tdObj = document.getElementsByTagName("td")[1].firstElementChild.value;    
var tdObj = document.getElementsByTagName("td");

     for(var i = 0 ; i<tdObj.length; i++){  

    var inputValue = tdObj[i].firstElementChild.value;     

    tdObj[i].innerText = inputValue;

  }

 

  var test = document.getElementById("table").outerHTML ;

 

  test +=myStyle;

  alert(test);

  document.write(test);

 

  var str ='';

  for(var i in test){

  str += i + ' = ' + test[i] + '\n\n';

 

  }

  alert(str);

 

  }

 

</script>

<style type="text/css">
.A{width:90px;height:35px;}

</style>