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 οnlοad="Show('表格处理数据'),loadTableByHiddenValue(['0017','0018']),Show('表格处理数据')">
<input type="button" value="更新" οnclick="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>