table插件
//动态添加一行
function addRow(){
var firstrow=document.getElementById('firstrow');
var firstCopy=firstrow.cloneNode(true);
firstrow.parentNode.insertAdjacentElement("beforeEnd",firstCopy);
}
//获取表格每行的信息,添加到数组对象中
function rowInfo(){
var atable=document.getElementById('atable');
var trs=atable.getElementsByClassName('row');
var msgList=[];
for(var i=0;i<trs.length;i++){
var msg={"a":"","b":"","c":"","d":""};
var tds=trs[i].getElementsByTagName('td');
msg.a=tds[0].innerText;
msg.b=tds[1].innerText;
msg.c=tds[2].innerText;
msg.d=tds[3].innerText;
msgList.push(msg);
}
//console.log(msgList);
}
//获取表格某列信息
function oneColInfo(index){
var atable=document.getElementById('atable');
var trs=atable.getElementsByClassName('row');
var colList=[];
for(var i=0;i<trs.length;i++){
var cols=trs[i].getElementsByTagName('td');
colList.push(cols[index].innerText);
}
//console.log(colList);
return colList;
}
//查询表格内容
function findInfo(){
var atable=document.getElementById('atable');
var trs=atable.getElementsByClassName('row');
var number=document.getElementById('number');
var city=document.getElementById('city');
var name=document.getElementById('name');
//console.log(number.value);
var colNumber=oneColInfo(1);//获取表格中所有联行号
var colCity=oneColInfo(3);
var colName=oneColInfo(4);
//console.log(typeof colNumber[0]);
var result=[];
if(number.value!=""){
for(var i=0;i<colNumber.length;i++){
// console.log(typeof number.value);
// console.log(typeof colNumber[3]);
if(number.value==colNumber[i]){
result.push(i);
}
}
console.log(result);
}
if(city.value!=""){
for(var i=0;i<colCity.length;i++){
// console.log(city.value);
// console.log(colCity[i]);
if(city.value==colCity[i]){
result.push(i);
}
}
console.log(result);
}
if(name.value!=""){
for(var i=0;i<colName.length;i++){
if(colName[i].indexOf(name.value)!=-1){
result.push(i);
}
}
console.log(result);
}
console.log(result);
var resultNum=numinArrayCount(result);
var result2=[];
for(var i=0;i<result.length;i++){
if(resultNum[result[i]]>1){
result2.push(result[i]);
console.log(result2);
}
}
if(result.length>0&&result2.length==0){
delRow(result);
}
if(result2.length>0){
delRow(result2);
}
}
//删除所有,保留某几行
function delRow(arr){
var atable=document.getElementById('atable');
var trs=atable.getElementsByClassName('row');
var orow=[];
for(var k=0;k<arr.length;k++){
orow.push(trs[arr[k]]);
}
console.log(orow);
for(var i=1,len=trs.length+1;i<len;i++){//删除全部
atable.deleteRow(1);
}
for(var i=0;i<orow.length;i++){
atable.appendChild(orow[i]);
}
}
table插件的更多相关文章
- bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
- 基于jquery的json转table插件jsontotable
分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container ...
- layui 框架 table插件 实现键盘快捷键 切换单元格编辑
最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- 表格(table) 插件:支持当前行增行、删除。使用事件委托
最近做一个项目,需要对表格进行增行和删行. 研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点. 功能: 支持在指定行下面增行: 支持删行指定行: 增行. ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- table插件实现
选择.取消.全选.全部取消.获取行ids /** * Created by lizongqiong on 2016/1/8. */ var $ = require('jquery'); var tab ...
- Jquery Data Table插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 在ASP.NET MVC中使用 Bootstrap table插件
Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...
- 利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
随机推荐
- 201521123065 《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 Q1:代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- 201521123038 《Java程序设计》 第二周学习总结
201521123038 <Java程序设计> 第二周学习总结 1.本章学习总结 学会在Java程序中使用函数,使程序层次更清晰 使用StringBuilder编写代码,减少内存空间的占用 ...
- PKI信息安全知识点详细解答包含HTTPS
1. 什么是X.509? X.509标准是ITU-T设计的PKI标准,他是为了解决X.500目录中的身份鉴别和访问控制问题设计的. 2. 数字证书 数字证书的意义在于回答公钥属于谁的问题,以帮助用户安 ...
- 工作总结--如何定位web系统前后台的bug,以及bug分析/测试感想
对于web项目前台和后台bug定位分析:一. 系统整体了解 懒企鹅营销服务平台用的架构:web前端: Bootstrap 3.0 组件丰富,兼容性好,界面美观 Server端: jsp+Servlet ...
- postman安装使用教程---图文讲解
一.安装postman 1,安装包安装 官网下载地址:https://www.getpostman.com 选择好对应的版本下载,下载完后直接安装 2,插件包安装 可以在谷歌的应用商店里面找到,或者在 ...
- JAVA实现上传文件到服务器、删除服务器文件
使用的jar包: <dependency> <groupId>com.jcraft</groupId> <artifactId>jsch</art ...
- 调用惯例Calling Convention (或者说:调用约定)
调用惯例影响执行效率,参数的传递方式以及栈清除的方式. 调用惯例 参数传递顺序 谁负责清除参数 参数是否使用暂存器 register 从左到右 被调用者 是 pascal 从左到右 被调用者 否 ...
- Java钉钉开发_02_免登授权(身份验证)(附源码)
源码已上传GitHub: https://github.com/shirayner/DingTalk_Demo 一.本节要点 1.免登授权的流程 (1)签名校验 (2)获取code,并传到后台 (3) ...
- Hive基础(2)---(启动HiveServer2)Hive严格模式
启动方式 1, hive 命令行模式,直接输入/hive/bin/hive的执行程序,或者输入 hive –service cli 用于linux平台命令行查询,查询语句基本跟mysql查询语句类似 ...
- 关于逆元的概念、用途和可行性的思考(附51nod 1013 和 51nod 1256)
[逆元的概念] 逆元和单位元这个概念在群中的解释是: 逆元是指数学领域群G中任意一个元素a,都在G中有唯一的逆元a',具有性质a×a'=a'×a=e,其中e为该群的单位元. 群的概念是: 如果独异 ...