脚本给TABLE 添加 删除 行的操作DEMO

最新推荐文章于 2021-05-22 16:51:09 发布
最新推荐文章于 2021-05-22 16:51:09 发布
阅读量888 收藏
点赞数
分类专栏： JAVA 文章标签： table 脚本 class stylesheet button function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaoshuai0920/article/details/8086847
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	
	<script>
//给table增加一行
function addTableRow() {
    var table1 = document.getElementById('table1');
    var cloneTab = document.getElementById('table2');
    //alert(cloneTab.firstChild.firstChild.innerHTML);
    //alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
    table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));

    var v= table1.firstChild.childNodes;
    var len = v.length;
    for(var i=1;i<len;i++){
        v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值
    }
}

//给table删除一行
function delTableRow(){
    var table1 = document.getElementById('table1');
    var isChecked = document.getElementsByName('isChecked');
    var len = isChecked.length;
    for(var i=len-1;i>=0;i--){
        if(isChecked[i].checked==true){
             table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
            //alert(isChecked[i].id);
            //alert(isChecked[i].parentNode.parentNode.innerHTML);
        }
    }
}
</script>
  </head>
  
  
  <body>
   
    <div>
				<div style="float: left; WIDTH: 99%; position: relative;">
		    <table id="table1" width="99%" cellspacing="1" cellpadding="1" border="0" bgcolor="#336699" align="left" style="margin-top:10px;">
              <tr bgcolor="#6699CC" align="center"
												style="font-weight: bold;">
												<td class="pt12-wh" width="10%" height="25">
													选择
												</td>
												<td class="pt12-wh" width="15%" height="25">
													检测
												</td>
												<td class="pt12-wh" width="15%" height="25">
												    容限/范围
												</td>
												<td class="pt12-wh" width="20%" height="25">
													检测方法
												</td>
												<td class="pt12-wh" width="20%" height="25">
												检查部门
												</td>
												<td class="pt12-wh" width="10%" height="25">
													频率
												</td>
												<td class="pt12-wh" width="10%" height="25">
													结果
												</td>
											</tr>
            
             </table>
             
             </div>
             </div>
              <!--控制table的按钮-->
             <div style="width: 99%; text-align: right; margin-top: 10px; margin-bottom: 2px; float: left">
					 <input type="button"  value="增加" οnclick= "addTableRow();"/> 
                     <input type="button"  value="删除" οnclick="delTableRow();"/>
                     
                     <!--模板table也叫做clone table style = "display:none"-->
  <table id='table2' style="display: none">
  <tr>
    <th  bgcolor="white" class="pt12-black" align="center"><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><input name="detection" type="text"  /></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><input name="scope" type="text"  /></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><input name="detectmethod" type="text"  /></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><input name="inspectiondepart" type="text"  /></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><input name="rate" type="text"  size="10"/></th>
    <th  nowrap="nowrap"  bgcolor="white" class="pt12-black" align="center"><select size="1" id="inspectresult" name="inspectresult">
              <option value="合格">合格</option>
              <option value="不合格">不合格</option>
         </select></th>
   
  </tr>
  </table>
                     
                     
				</div>
  </body>
</html>

做一个有理想的码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui数据表格的使用，做一个常用带搜素框的查询表格的示例——layui笔记
weixin_42128648的博客
03-17 3345
这里的field的字段名只要和list中的对象的属性对应就可以把结果渲染出来了。3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的。3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的。2、按照layui的使用规则写js（官网直接复制示例改一改）2、按照layui的使用规则写js（官网直接复制示例改一改）我们返回的需要按照这个格式返回，layui会拿这个解析。下面是控制层的代码，这里使用的是springMVC。1、需要写一个table标签，到时候用js来渲染。
table表设置了class属性，如何修改里面的tr或者td样式
longqiyuye925的博客
01-03 2万+
今天工作的时候遇到这样一种情况:<table class="demo1"> <tr> <td>内容</td> </tr> </table> 我需要修改其中的td，让其内容左对齐，一般我只需要 <td align="left"></td> 但是此时利用标签内的属性并不能成功，思考了下，我觉得既然CSS规定了样式，那么再使用CSS语言令其引用的发生冲突就好了。 于是<t
ajax给表格添加行（demo）
weixin_37974649的博客
02-01 979
一、表格代码 &lt;table class="table table-bordered table-hover" &gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt; id &lt;/th&gt; &lt;th&gt; 选题名称 &lt;/th&gt; &lt;th&gt; 老师 &amp
bootstrap-table-demo
03-25
7. **扩展功能**：Bootstrap Table 还提供了许多其他扩展功能，如行选择、行编辑、列隐藏、固定列、合并单元格等。这些功能可以通过额外的插件或设置来启用。 8. **API与事件**：Bootstrap Table 提供了一系列的API...
jquery table rowspan 表格单元格合并Demo.zip
09-18
在这个“jquery table rowspan 表格单元格合并Demo.zip”中，我们主要关注的是如何使用 jQuery 来实现 HTML 表格（`<table>`）中的 `rowspan` 属性来合并单元格，以创建更复杂、更有结构感的表格布局。 首先，`...
react-table-demo
04-06
可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试...
JavaScript操作SQLite数据库Demo
04-14
JavaScript是一种广泛应用于Web开发的脚本语言，它通常在浏览器环境中执行，负责处理用户交互、动态内容以及与服务器的通信。然而，JavaScript也可以用于客户端的数据存储，这得益于HTML5引入的离线存储技术，比如...
简单table样式记录demo
hum的博客
02-02 799
demo： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table</title> <style type="text/css"> .th-div,.th-in{ width:100px; height: 50p...
列表渲染分页批量删除接口调用
qq_42839386的博客
05-22 153
<!--搜索--> <div class="demoTable"> 关键字： <div class="layui-inline"> <input class="layui-input" name="id" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" data-type="reload">搜索&l.
layui 实现点击按钮添加一行（方法渲染创建的table）
热门推荐
sj0613xz的博客
01-10 6万+
目标：layui 实现点击按钮添加一行解决方案：方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个 标签；方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object; 之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在中加样式，特别是table中有很多种控件时，样式的添加非
使用LayUI操作数据表格
前端kk的博客
11-15 4001
搜索   在table标签的上方，加入这样一组html   div class="demoTable"> 搜索商户： div class="layui-inline"> input class="layui-input" name="keyword" id="demoReload" autocomplete="off"> div>
JQuery动态删除table指定行
brokenQ的专栏
05-19 1399
需要注意的问题：如果在不能动态删除table指定行 jsp：                         function del(obj){     $(obj).parent().parent().remove(); }
js给table自动增加行和删除行
java学习之简单开发快乐学习
06-11 377
给tbody添加ID &lt;tbody id="fm2_table_body"&gt; &lt;/tbody&gt; js代码如下： //添加行function addNewPersonRow(){ i=i+1; var bodyObj=document.getElementById("fm2_table_body");   bodyObj.style.display = ''; if...
layui table 完整实例
qq_38571996的博客
09-13 1万+
1、layui 搜索 var $ = layui.$, active = { reload: function () { debugger var countyId = $("#countyId option:selected").val(); var fwzt = $...
table表格demo
xixiaixinxin的博客
03-15 1065
账号管理                                        placeholder=                                输入账号/部门/职位/职责进行查询>                       
CSS设计表格（中）--jQuery实现删除指定行
王文松的博客
12-13 1万+
前言    上一节，利用CSS实现了一个样式表格，增加了全选功能，本节利用jQuery实现删除指定行功能。如下效果图：     实现代码    table3.html内容    Table删除行 body{margin: 0;} .main{ width: 600px; margin-top: 10px; margin-l
bootstrap table 分页 demo
最新发布
10-18
Bootstrap Table是一个基于Bootstrap的表格插件，它提供了一套简单易用的表格展示和操作功能。 要实现Bootstrap Table的分页功能，可以通过以下步骤： 1. 首先，在HTML文件中引入必要的样式表和脚本文件，包括Bootstrap的CSS和JS文件、Bootstrap Table的CSS和JS文件以及相关的插件文件。 2. 在HTML文件中创建一个表格元素，并给它一个唯一的id属性，用来标识这个表格。 3. 在JavaScript文件中编写相应的代码，在页面加载完成后初始化Bootstrap Table，并设置一些基本的参数，如表格的id、数据源等。示例如下： ```javascript $(document).ready(function() { // 初始化Bootstrap Table $('#table-demo').bootstrapTable({ url: 'data.json', // 数据源文件的URL pagination: true, // 启用分页功能 pageSize: 10, // 每页显示的记录数 pageList: [10, 25, 50, 100], // 可选择的每页记录数 paginationPreText: '<', // 上一页按钮的图标或文字 paginationNextText: '>', // 下一页按钮的图标或文字 paginationLoop: false, // 禁止循环翻页 sidePagination: 'client', // 客户端分页 columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { field: 'age', title: '年龄' }] }); }); ``` 4. 在数据源文件中提供需要显示的数据，如JSON格式的数据。在上述代码中，数据源文件为data.json，可以根据实际情况修改。 通过以上步骤，就可以实现一个简单的Bootstrap Table分页的demo。可以根据实际需求修改和扩展代码，实现更多的功能和样式定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值