动态增加表格及读取动态表格中的值
来源:互联网 发布:知乎论坛注册 编辑:程序博客网 时间:2024/05/18 12:04
最近在找一些关于动态表格方面的资料,经过小小组合后可以动态的增加行,及读取表格中的值,在脚本相对不好调试,所以就将我调好的代码放上来,可以直接运行看结果的
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>动态添加删除表格</title>
<Script Language="Javascript">
var cGetRow=-99999;
function AddRow()
{
//添加一行
var i =tab1.rows.length;
var Nam="name"+i;
var Cod="code"+i;
var newTr = tab1.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var s='<input type="text" name='+Nam+' id='+ Nam +'>';
var t='<input type="text" name='+Cod+' id='+ Cod +'>';
//设置列内容和属性
newTd0.innerHTML = '<input type="checkbox" id="box4" onClick="GetRow()">';
newTd1.innerHTML= s;
newTd2.innerHTML= t;
}
function DelRow(iIndex)
{
//删除一行
if(iIndex==-99999)
alert("系统提示:没有选中行号!");
else
tab1.deleteRow(iIndex);
}
function GetRow()
{
//获得行索引
//两个parentElement分别是TD和TR哟,rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}
function ReadRow()
{
alert(tab1.rows.length);
for(var i=0;i<tab1.rows.length;i++)
{
alert(document.getElementById("name"+i).value);
alert(document.getElementById("code"+i).value);
}
//显示行号
//alert(cGetRow);
//alert(document.getElementsByTagName("tr").length);
}
</script>
</head>
<body>
<table id="tab1" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td>
<td id="a"><input type=text name="name0" id="name0"></td>
<td><input type=text name="code0" id="code0"></td>
</tr>
</table>
<input type="submit" name="Submit" value="增加一行" onclick="javascript:AddRow();">
<input type="submit" name="Submit" value="删除一行" onclick="javascript:DelRow(cGetRow);">
<input type="submit" name="Submit" value="读取表格中的值" onclick="javascript:ReadRow();">
</body>
</html>
- 动态增加表格及读取动态表格中的值
- 动态增加表格及读取动态表格中的值
- 动态增加表格
- 动态增加表格
- 动态增加表格行
- js 动态增加表格
- js 动态增加表格
- 表格动态增加删除
- JS动态增加表格
- 动态增加,删除表格中的行
- 动态表格读取课程表
- 动态添加表格(增加事件)
- Javascript 动态增加表格行
- 动态增加删除表格行
- DOM操作动态增加表格
- 动态增加表格的行
- 动态表格
- 动态表格
- Java 经典网站集锦
- 用createRemoteThread远程注入(非DLL插入)
- 经常用到的javaScript技术
- 64位MD5加密
- 用Eclipse3.2 + Myeclipse5.0GA + Tomcat5.5.17 + j2sdk1.5 搭建J2EE开发环境
- 动态增加表格及读取动态表格中的值
- 新手SuSE Linux 10.1上手贴(硬盘安装,驱动安装,添加源,xgl配置……)
- 段落的实现
- 深入剖析JSP和Servlet对中文的处理
- 技术的发展-快就一个字
- mysql初学笔记
- 无题
- 在b/s开发中经常用到的javaScript技术
- 出发吧!