日期:2014-05-16  浏览次数:20348 次

Javascript-表格行-添加,删除

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