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. ...
随机推荐
- 201521123044 《Java程序设计》第3周学习总结
1. 本章学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- 201521123053《Java程序设计》第1周学习总结
1. 本周学习总结 第一次接触Java,让我感到很吃力,有些困难.但我知道接触所有新事物都会困难,慢慢来就好. 下面是我这周的学习总结: one 第一节课 老师上课太快了,而且我没预习,根本跟不上 ...
- 201521123028《Java程序设计》第1周学习总结
1. 本周学习总结 通过本周的学习: 1.了解了Java的发展史(从OAK转向Internet,并逐步发展至今的历程) 2.与C语言比较,Java语言的特点: ①将源程序编译成一种结构中立的中间文件格 ...
- springmvc学习笔记(常用注解)
springmvc学习笔记(常用注解) 1. @Controller @Controller注解用于表示一个类的实例是页面控制器(后面都将称为控制器). 使用@Controller注解定义的控制器有如 ...
- ionic 打包安卓包
一.配置环境: 先按照之前的文章,配置好环境需要: 二.安装 1. 这里前提是 需要安装 node (地址: http://nodejs.cn/download/) 命令: node -v // ...
- 监听器第一篇【基本概念、Servlet各个监听器】
什么是监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 为什么我们要使用监听器 ...
- java: Multiple encodings set for module chunk test "GBK" will be used by compiler
IDEA 进行编译代码的时候,特别是新项目 特别容易出现 编码错误,但是 File-Encoding中设置的又没有问题,而且maven 是能打包的,就是用 idea 自带的 编译的时候 就会出现提示 ...
- JUDE-UML工具软件介绍
JUDE社区版(不考虑破-解). 现在Jude改名为Astah了.JUDE已停止发展,Astah是它的替代品.Jude有3个版: Professional版, Community版(免费),Share ...
- 百度编辑器不能插入html标签解决方法
找到此方法: me.addInputRule(function (root) { var allowDivTransToP = this.options.allowDivTransToP; var v ...
- 为什么要用深度学习来做个性化推荐 CTR 预估
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:苏博览 深度学习应该这一两年计算机圈子里最热的一个词了.基于深度学习,工程师们在图像,语音,NLP等领域都取得了令人振奋的进展.而深 ...