表格格式如下:
<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函数:
/**
*删除当前行
*/
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选择器的优势的几句:
//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();
分享到:
相关推荐
最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。 1:点击全选的选择框CheckBox,选中以下列表中所有的选择框 2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框 3:单选某个...
2.12.html 不加break的switch语句。 2.13.html switch语句使用方法。 2.14.js 将函数作为参数传递。 2.15.html arguments参数的使用。 2.16.html apply方法与call方法的使用。 第3章(\c03) ...
13.海量批量删除数据库,调用公共存储过程,参数,表明,主键 特点: UI:传统html css,美观 漂亮 大方 实用 js框架:jquery 系统大部分使用AJAX操作。大大提高了用户体验 功能描述: 1.支持N级菜单导航,菜单...
旗舰版支持Excel批量导入商品功能,只须下载Excel模板按要求进行添加商品即可,添加完后通过批量添加商品功能,上传Excel文件即可一次性批量添加完成,非常方便。特别适合经常在本地来完成Excel添加,然后集中批量...
[√] 批量审核和禁止会员 [√] !频道html目录判断方式更新 [√] 后台首页档案状态显示 [√] 后台档案列表添加频道筛选 [√] 完善后台菜单分类/列表显示 [√] 添加文档时选中预选频道 [√] 频道列表管理页快速...
修正了评论模块和留言模块后台管理批量操作逻辑功能的BUG 修正了mssql版本无法添加外部频道的BUG 修正了mssql版本无法修改用户信息的BUG 修正了视频播放器一个代码小BUG 增加了一个简单的在线测试插件 增加了...
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询(非DataTables Search),页面异步刷新。 说明:sp:message标签...-- 查询、添加、批量删除、导出、刷新 --> <button type=button
欢迎使用水云斋网站管理系统;本系统为免费开放源代码的网站管理系统,你可以在本系统的基础上进行任何...修正了图库中批量删除的一点小问题。更新方法:下载压缩包;覆盖flash.php、soft.php、gallery.php三个文件!
-- 作 用:数据库执行语句,可执行查询添加修改删除等任何sql语句 -- 参 数:$sql sql语句(必填) -- 返回值:布尔 -- 实 例:无 *******************************************************************/ ...
后台可批量删除,置顶,推荐,幻灯新闻。前台可获取获取新闻中的图片以幻灯的样式显示。默认获取编辑器中的第一张图片。同时支持 删除新闻的时候同时删除上传的图片。以节省您的空间,为您节省一些空间费用。大家都...
页面模板可以在线预览、添加、修改、删除,每个模型、栏目可以绑定不同的模板,让您的网站不再陷入单一化的页面状态,只要您愿意,您的站点绝不可能和其他人的站点有雷同。 4、友情链接系统。可以新增友情链接类别...
页面模板可以在线预览、添加、修改、删除,每个模型、栏目可以绑定不同的模板,让您的网站不再陷入单一化的页面状态,只要您愿意,您的站点绝不可能和其他人的站点有雷同。 4、友情链接系统。可以新增友情链接类别...
4.支持批量上传,抓取远程图片 5.外部图片自动保存在本地 6.自动控制上传图片和本地化图片尺寸 7.自动给上传及本地化图片添加水印 8.自动提取首张图片为缩略图 9.自动生成任意大小缩略图 10.幻灯片模式图片展示...
32、保存远程图片,添加或采集信息时,可选择远程保存图片到本地服务器,防止对方删除图片或者服务器不正常时图片不显示。 33、水印缩略图,可按要求等比缩小,可按要求在指定位置加图片或文字水印,提升内容被转载...
输入关键字后回车即可搜索,与单击搜索按钮功能一样。 6 便签检索功能修改为单一检索方式。原来的方式是叠加。叠加的方式可以实现的功能是通过多个标签来定位资源。但是好像很多人不理解这种方式。 7 加入积分功能...
html (String) : 用于动态创建DOM元素的HTML标记字符串 示例 动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性...
88 <br>0136 如何进行文本加密与解密 88 <br>0137 如何区别0、空字符串、Null、Empty和Nothing 89 <br>0138 从字符串中分离文件路径、文件名及扩展名 89 <br>0139 如何批量替换某一类字符串 89...
02 级联删除与set null 03 多表查询之连接查询 04 多表查询之复合查询与子查询 05 mysql之索引 第48章 01 python操作数据库pymysql 02 数据库之事务 03 mysql事务之savepoint 第49章 01 http协议之请求协议 02 ...