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" οnclick="edit()"></input>
<input type="button" value="保存" name="save" οnclick="mySave()"></input>




<script>
 function test(obj) 
 {   
 
  var R1InnerHtml ='<tr class="R1"><td>&nbsp </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>