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>
相关推荐
NULL 博文链接:https://long316.iteye.com/blog/1393886
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JS自动添加,删除表格总结,及window窗体居中。内含源代码!!!!
静态实现javascript,实现表格的增加和删除等功能,值得初学者学习
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...
在一些系统使用中,我们常会遇到需要添加或删除行的要求,本例可以快速简洁地实现这功能(里面的返回需改成javascript:history.go(-1))
本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
这个表格显示了一组学生的成绩信息,包括姓名、科目和得分,并提供了删除操作。 在页面中,先声明了一个 table 元素,并设置了 id 为 "student-table"。该表格包含了表头和表体,其中表头包含了四列:姓名、科目、...
主要介绍了js简单的表格添加行和删除行操作,需要的朋友可以参考下
* 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....
实现将输入的信息添加到表格、删除表格内容的功能,适合前端初学者巩固DOM相关知识。涉及全选、反选,几种表单标签的使用。