js操作table_插入+编辑+保存

<table id="table" class="ke-zeroborder" cellspacing="0" cellpadding="0" border="1">
<tbody><tr><td colspan="12" >风险发生概率的判断：<br />高风险：发生概率超过60%；<br />
中风险：发生概率在30%到60%之间；<br />
低风险：发生概率小于30%<br />
<br />
风险严重性的判断：<br />
高严重性：会严重影响项目进度，导致项目延期20%以上，或严重影响到项目质量，项目的质量到了无法评估的地步等等；<br />
中严重性：对项目的进度和质量影响不是很大，在可控范围内，如项目延期不会超过20%，项目的质量明确可以得到保障；<br />
低严重性：对项目影响较小，可以很容易规避。</td>
</tr>
<tr>
<td class="A">操作</td>
<td class="A">序号</td>
<td class="A">风险事件归类</td>
<td class="A">发现阶段</td>
<td class="A">发生概率</td>
<td class="A">严重性</td>
<td class="A">风险分析</td>
<td class="A">风险措施</td>
<td class="A">责任人(唯一)</td>
<td class="A">状态</td>
<td class="A">当前进展</td>
<td class="A">备注</td>
</tr>




<tr class="R1">
<td rowspan="3" name="R1td"><input type="button" name="R1" value="增加行" οnclick="test(this)" /></td>
<td rowspan="3" name="R1td">1</td>
<td rowspan="3" name="R1td">苹果6月1号协议</td>
<td>功能测试</td>
<td>高</td>
<td>高</td>
<td>增加延期；</td>
<td>项目延期10天；</td>
<td>A</td>
<td>已发生</td>
<td></td>
<td></td>
</tr>

<tr class="R1">
<td >功能测试</td>
<td>高</td>
<td>高</td>
<td>开发和sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss测试都；</td>
<td>开发先搭建一项目质量；</td>
<td>B</td>
<td>未发生</td>
<td></td>
<td></td>
</tr>


<tr class="R1">
<td>功能测试</td>
<td>高</td>
<td>高</td>
<td>定</td>
<td>和平台组进崩溃</td>
<td>C</td>
<td>已发生</td>
<td></td>
<td></td>
</tr>


<tr class="R2">
<td rowspan="3" name="R2td"><input type="button" name="R2" value="增加行" οnclick="test(this)" /></td>
<td rowspan="3" name="R2td">1</td>
<td rowspan="3" name="R2td">苹果6月1号协议</td>
<td>功能是是事实上事实上事实上事实上测试</td>
<td>高</td>
<td>高</td>
<td>增加的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶大 延期；</td>
<td>项目延期10天；</td>
<td>A</td>
<td>已发生</td>
<td></td>
<td></td>
</tr>

<tr class="R2">
<td >功能测试</td>
<td>高</td>
<td>高</td>
<td>开发和ss呃呃呃鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎测试都；</td>
<td>开发先搭建一项目质量；</td>
<td>B</td>
<td>未发生</td>
<td></td>
<td></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 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.setAttribute("class",classFlag);


rowNew.innerHTML = R1InnerHtml;

var TDRowSpan = document.getElementsByName(classFlag + 'td');
for(var i in TDRowSpan){
TDRowSpan[i].rowSpan = rowChildCount +1;
}
}




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);
   }
</script>




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