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. ...
随机推荐
- 201521123025<<java程序设计>>第9周学习总结
1. 本周学习总结 2.书面作业 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现Array ...
- 201521123050 《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 1 ...
- Eclipse rap 富客户端开发总结(15) :rap如何使用js
1. 把输入的字符串当 javascript 执行 try { RWT.getResponse().getWriter().println("alert('123');"); } ...
- 32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址
32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件中有保存的 但是高版本有了随机基址,那么要怎么解决这 ...
- Shiro第三篇【授权、自定义reaml授权】
Shiro授权 上一篇我们已经讲解了Shiro的认证相关的知识了,现在我们来弄Shiro的授权 Shiro授权的流程和认证的流程其实是差不多的: Shiro支持的授权方式 Shiro支持的授权方式有三 ...
- Hibernate逆向工程【PowerDesigner、idea环境下】
为什么要使用逆向工程 由于我们每次编写Hibernate的时候都需要写实体,写映射文件.而且Hibernate的映射文件也容易出错.而逆向工程可以帮我们自动生成实体和映射文件,这样就非常方便了. 使用 ...
- [04] Cookie概念和基本使用
1.Cookie是什么 Cookie,中文名称为"小型文本文件"或"小甜饼",指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密). 很多网站 ...
- .NET Core 使用RabbitMQ
RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的 ...
- Maven简介(一)
在现实的企业中,以低成本.高效率.高质量的完成项目,不仅仅需要技术大牛,企业更加需要管理大牛,管理者只懂技术是远远不够的.当然,管理可以说有很多的方面,例如:对人员的管理,也有对项目的管理等等.如果你 ...
- Java9新特性之——JShell
java9已经在北京时间9月22日正式发布,开发者可以在oracle jdk官网上下载到最新的jdk9.jdk9和jdk8中的新特性不同:jdk8中的stream和lambda表达式能够让开发者非常快 ...