打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
HTML TABLE批量添加行与删除行
悟静
>《.net和asp.net》
2012.03.07
关注
<
table
class
=
"page_datalist"
id
=
"batch_add_table"
>
<
thead
>
<
tr
>
<
th
width
=
"3%"
>
日期
</
th
>
<
th
scope
=
"col"
width
=
"2%"
>
开始时间
</
th
>
<
th
scope
=
"col"
width
=
"2%"
>
结束时间
</
th
>
<
th
scope
=
"col"
width
=
"10%"
>
议题
</
th
>
<
th
scope
=
"col"
width
=
"8%"
>
地点
</
th
>
<
th
scope
=
"col"
width
=
"20%"
>
内容
</
th
>
<
th
scope
=
"col"
width
=
"8%"
>
操作
</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<!-- 日期 -->
<
td
align
=
"left"
>
<
input
id
=
"date"
type
=
"text"
name
=
"date"
class
=
"Wdate"
onfocus
=
"WdatePicker({dateFmt:'yyyy-MM-dd'})"
value
=
""
readonly
=
"readonly"
/>
</
td
>
<!-- 开始时间 -->
<
td
align
=
"left"
>
<
input
id
=
"startTime"
type
=
"text"
name
=
"startTime"
class
=
"Wdate"
value
=
""
onfocus
=
"WdatePicker({dateFmt:'HH:mm'})"
readonly
=
"readonly"
/>
</
td
>
<!-- 结束时间 -->
<
td
align
=
"left"
>
<
input
id
=
"endTime"
type
=
"text"
name
=
"endTime"
class
=
"Wdate"
value
=
""
onfocus
=
"WdatePicker({isShowClear:false,dateFmt:'HH:mm',minDate:'#F{$dp.$D(\'startTime\')||\'2020-10-01\'}'})"
readonly
=
"readonly"
/>
</
td
>
<!-- 议题 -->
<
td
align
=
"left"
>
<
input
id
=
"topic"
type
=
"text"
value
=
""
maxlength
=
"128"
/>
</
td
>
<!-- 地点 -->
<
td
align
=
"left"
>
<
input
id
=
"location"
type
=
"text"
value
=
""
maxlength
=
"128"
/>
</
td
>
<!-- 内容 -->
<
td
align
=
"left"
>
<
textarea
id
=
"description"
rows
=
"1000"
cols
=
"40"
name
=
"description"
style
=
"height:80px;"
>
</
textarea
>
</
td
>
<
td
align
=
"center"
>
<
a
href
=
"javascript:void(0);"
onClick
=
"insertRow(this);"
>
添加
</
a
>
<
a
href
=
"javascript:void(0);"
onClick
=
"delCurrentRow(this);"
>
删除
</
a
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
对应的JS函数:
[javascript]
view plain
copy
?
/**
*删除当前行
*/
function
delCurrentRow(obj){
if
(confirm(
"确定删除当前议程?"
)){
if
(document.all.batch_add_table.rows.length>2){
var
clickedRow=obj;
while
(clickedRow.tagName!=
"TR"
){
clickedRow=clickedRow.parentNode;
}
clickedRow.parentNode.removeChild(clickedRow);
}
else
{
alert(
"此行不能进行删除!"
);
return
;
}
}
}
/**
*复制当前行并插入到表格中去
*/
function
insertRow(obj){
//获取当前表格batch_add_table的行总数
var
rowNum=document.all.batch_add_table.rows.length;
//获取当前表格的行并克隆
var
newrow = document.all.batch_add_table.rows[rowNum-1].cloneNode(
true
);
//新行的列数
var
colNum=newrow.cells.length;
//获取当前行并进行递归循环操作找到当前行的节点
var
oldTr=obj;
while
(oldTr.tagName!=
"TR"
){
oldTr=oldTr.parentNode;
}
//var oldTr = $("tr:last", $("#batch_add_table"));
//var oldTr = $("tr:last", $("#batch_add_table"));
//通过JQUERY选择器来获取对应的控件的值
var
date= $(
"#date"
, oldTr).val();
var
startTime= $(
"#startTime"
, oldTr).val();
var
endTime = $(
"#endTime"
, oldTr).val();
if
(date==
''
){
alert(
'请选择议程日期!'
);
return
;
}
if
(startTime==
''
){
alert(
'请选择议程开始时间!'
);
return
;
}
if
(endTime==
''
){
alert(
'请选择议程结束时间!'
);
return
;
}
$(
"#startTime"
, newrow).val(endTime);
//复制当前行到表格
document.all(
"batch_add_table"
).appendChild(newrow);
}
彰显JQUERY选择器的优势的几句:
[javascript]
view plain
copy
?
//var oldTr = $("tr:last", $("#batch_add_table"));
//var oldTr = $("tr:last", $("#batch_add_table"));
//通过JQUERY选择器来获取对应的控件的值
var
date= $(
"#date"
, oldTr).val();
var
startTime= $(
"#startTime"
, oldTr).val();
var
endTime = $(
"#endTime"
, oldTr).val();
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
完整的时间(开始和结束时间)输入框验证js
JS比较两个日期的大小
EasyOCR 一个基于 Python 的 OCR 开源项目 – 木木
InfluxDB 聚合函数实用案例
'交易报告及短信通知的创建和发布
Birt学习笔记
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×