<%@ page language="java" import="java.util.*,com.page.wash.giveclothing.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>添加表格信息</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<script language="javascript" type="text/javascript">
function AddRow()
{
//添加一行
var i =tab1.rows.length;
var Nam="'div1'";
var Cod="fuJ"+i;
var newTr = tab1.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id='+Cod+' />';
newTd1.innerHTML = " 衣服尺码";
newTd2.innerHTML = " 衣服花色";
newTd3.innerHTML = " 处理类型";
}
function DelRow()
{
//删除一行
var shu=0;
var cheCou=document.all("box1");
for(var i=0;i<cheCou.length;i++)
{
if (cheCou[i].checked==true)
{
shu++;
}
}
if(shu==cheCou.length)
{
alert('最少要添加一件衣服');
return;
}
else if(shu==0)
{
alert('请选择你要删除的信息');
return;
}
else if(shu==1)
{
for(var i=0;i<cheCou.length;i++)
{
if(cheCou[i].checked==true)
{
tab1.deleteRow(i+1);
}
}
}
else if(shu>1)
{
for(var a=0;a<shu;a++)
{
for(var i=0;i<cheCou.length;i++)
{
if(cheCou[i].checked==true)
{
tab1.deleteRow(i+1);
break;
}
}
}
}
}
function GetRow()
{
//获得行索引
//两个parentElement分别是TD和TR哟,rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}
</script>
</head>
<body>
<form name="form1" action="${pageContext.request.contextPath}/giveClothing.do?method=FuJiaFei" method="post" >
<center>
<fieldset>
<legend><strong>动态添加一行表格</strong></legend>
<input type=hidden id="hid" name="hid"/ />
<table id="tab1" align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
<thead>
<tr>
<th align="center" width="10%">选择</th>
<th align="center" width="15%">衣服尺码</th>
<th align="center" width="15%">衣服花色</th>
<th align="center" width="15%">处理类别</th>
</tr>
</thead>
<tr >
<td><input type=checkbox id="box1" onClick="GetRow()" />
<input type="hidden" name="fuJ" id="fuJ1" />
</td>
<td> 衣服尺码</td>
<td> 衣服花色</td>
<td> 处理类别</td>
</tr>
</table>
<table align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
<tr>
<td align="right">
<input type="button" name="Submit" value="增加一行" onclick="javascript:AddRow();" />
<input type="button" name="Submit" value="删除一行" onclick="javascript:DelRow();" />
</td>
</tr>
</table>
</form>
</body>
</html>
分享到:
相关推荐
通过js来控制动态加一行或删除一行,非常适合table中td一行的添加和删除。
JS动态添加、删除Table行排序(删除整行、删除整列)JS动态添加、删除Table行排序(删除整行、删除整列)
利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。
本效果带tab切换效果。...js实现自动添加删除一行。添加删除时序号自动改变。每一行后面有添加一行按钮,点击时自动在点击行的下面添加一行。新添加行有文本框,文本框输入值失去焦点后自动变为输入的值。
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
通过JS实现了动态的增加一行或是删除一行,可以进行多行数据录入。
第一列 </th> <th align="center"> 第二列 </th> <th align="center"> 第三列 </th> <th align="center"> 第四列 </th> <th align="center"> 第五列 </th> ...
又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能,接下来通过代码实例给大家介绍JavaScript实现动态...
JS删除或者添加一行的代码,可以直接测试。
js table添加、删除行。点“添加”按钮可以添加一行,每行后面都有一个删除按钮,可以删除所在行。
用js实现对table添加行、删除行、复制行的操作。
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
动态table添加或者删除一行使序号重新排序,placeholder、id和name同时重新排序
3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...
NULL 博文链接:https://mousepc.iteye.com/blog/969497
当仅存在一行时,只有添加按钮,而删除按钮被隐藏,当多于一行时,仅在最后行处显示添加和删除按钮,其余行仅显示删除按钮。
在一些系统使用中,我们常会遇到需要添加或删除行的要求,本例可以快速简洁地实现这功能(里面的返回需改成javascript:history.go(-1))
主要介绍了JavaScript实现动态添加,删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...