Javascript处理表格行的添加,删除,及重载时新增行的处理;
具体代码如下:
<SCRIPT type=text/javascript src="mdbDataBase.js"></SCRIPT>
<script>
?? //添加行;
?? function addRow(tabId,rowNum,tdRows,startId,hidId){
?? ?var tab = document.getElementById(tabId);
?? ?var rowNum = document.getElementById(rowNum);
?? ?var tbRows = document.getElementById(tdRows);
?? ?var hidObj = document.getElementById(hidId);
?? ?hidObj.value++;
?? ?var cells = rowNum.getElementsByTagName('td')[0].colSpan;
?? ?var rowIndex = rowNum.rowIndex;
?? ?var tr = tab.insertRow(rowIndex);
?? ?tbRows.rowSpan++;
?? ?var tdId = tab.rows.length*cells + startId
?? ?for(var i=0; i<cells; i++){
?? ?? var td = tr.insertCell();
?? ?? td.style.border = '1px solid #000';
?? ?? td.innerHTML = '<textarea class="textarea1" id='+tdId+' style="width:90%"></textarea>'
?? ?? tdId++
?? ?}
?? }
??
?? //删除行1
?? function deleteRow(tabId,rowNum,tdRows,hidId){
?? ?var tab = document.getElementById(tabId);
?? ?var rowNum = document.getElementById(rowNum);
?? ?var tbRows = document.getElementById(tdRows);
?? ?var hidObj = document.getElementById(hidId);
?? ?var rowIndex = rowNum.rowIndex;
?? ?var hidVal = hidObj.value;
?? ?if(hidVal>0){
?? ??tab.deleteRow(rowIndex-1);
?? ??hidObj.value--;
?? ??tbRows.rowSpan--;
?? ?}else{
?? ??alert('无法删除!')
?? ?}
?? }
??
?? //删除行2
?? function deleteRow2(tabId,rowNum,tdRows,hidId){
?? ?var tab = document.getElementById(tabId);
?? ?var rowNum = document.getElementById(rowNum);
?? ?var tbRows = document.getElementById(tdRows);
?? ?var hidObj = document.getElementById(hidId);
?? ?var rowIndex = rowNum.rowIndex;
?? ?var hidVal = hidObj.value;
?? ?if(hidVal>0){
?? ??tab.deleteRow(rowIndex-1);
?? ??hidObj.value--;
?? ?}else{
?? ??alert('无法删除!')
?? ?}
?? }
??
? //页面重载时,加载增加的行的数据;
? function loadTableByHiddenValue(arr){
? ???for(var i=0; i<arr.length; i++){
? ????var hid = document.getElementById(arr[i]);
? ????var hid_val = hid.value;
? ????if(hid_val>0){
? ?????var hid_id = hid.id;
? ?????for(var j=0; j<hid_val; j++){
? ??????? var add_id = "add"+hid_id;
? ??????? var add_btn = document.getElementById(add_id);
? ??????? add_btn.click();
? ?????}
? ????}
? ????hid.value=hid_val;
? ???}
? ???? }
? ?
</script>
</head>
<body?? onload="Show('表格处理数据'),loadTableByHiddenValue(['0017','0018']),Show('表格处理数据')">
<input type="button" value="更新" onclick="update('表格处理数据')" />
<table id='tab' width="60%" border="1">
? <tr>
??? <td width="7%">标题</td>
??? <td width="16%">标题</td>
??? <td width="22%">标题</td>
??? <td width="18%">标题</td>
??? <td width="20%">标题</td>
??? <td width="17%">标题</td>
? </tr>
? <tr>
??? <td id="tdRows1" rowspan="3"><p>标</p><p>题</p></td>
??? <td>标题</td>
??? <td><textarea class='textarea1' id='0016' style="width:80px;" /></textarea>??? </td>
??? <td><textarea class='textarea1' id='0001' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0002' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0003' style="width:80px;" /></textarea></td>
? </tr>
? <tr>
??? <td>标题</td>
??? <td><textarea class='textarea1' id='0004' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0005' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0006' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0007' style="width:80px;" /></textarea></td>
? </tr>
?<tr id='rowNum1'>
? <td colSpan=5>
? <input type='hidden' id='0017' value=0 />
? <input type='button' value=' 添? 加 ' id='add0017' onClick="addRow('tab','rowNum1','tdRows1',1000,'0017')"/>
? <input type='button' value=' 删? 除 ' id='del0017' onClick="deleteRow('tab','rowNum1','tdRows1','0017')"/>
? </td>
?</tr>
? <tr>
??? <td id="tdRows2" rowspan="3"><p>标</p><p>题</p></td>
??? <td>标题</td>
??? <td><textarea class='textarea1' id='0008' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0009' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0010' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0011' style="width:80px;" /></textarea></td>
? </tr>
? <tr>
??? <td>标题</td>
??? <td><textarea class='textarea1' id='0012' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0013' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0014' style="width:80px;" /></textarea></td>
??? <td><textarea class='textarea1' id='0015' style="width:80px;" /></textarea></td>
? </tr>
?<tr id='rowNum2'>
? <td colSpan='5'>
??? <input type='hidden' id='0018' value=0 />
??? <input type='button' value=' 添? 加 ' id='add0018' onClick="addRow('tab','rowNum2','tdRows2',1100,'0018')"/>
??? <input type='button' value=' 删? 除 ' id='del0018' onClick="deleteRow2('tab','rowNum2','tdRows2','0018')"/>
? </td>
?</tr>
</table>
</body>