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. ...
随机推荐
- 201521123075 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码为 public boolean contains(Object o) ...
- 201521123026 《Java程序设计》第4周学习总结
1. 本章学习总结 尝试使用思维导图总结有关继承的知识点 使用常规方法总结其他上课内容 1.类的重写:在子类中重写的方法需要和父类被重写的方法具有相同的方法名.参数列表以及返回值类型.当子类重写父类的 ...
- 201521123080《Java程序设计》第1周学习总结
#1. 本周学习总结 Java开发环境,如何用记事本和eclipse进行编程. #2. 书面作业 Q1.为什么java程序可以跨平台运行?执行java程序的步骤是什么?(请用自己的语言书写) ...
- 201521123007《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- hadoop-2.6.0源码编译问题汇总
在上一篇文章中,介绍了hadoop-2.6.0源码编译的一般流程,因个人计算机环境的不同, 编译过程中难免会出现一些错误,下面是我编译过程中遇到的错误. 列举出来并附上我解决此错误的方法,希望对大家有 ...
- vue+element搭建的后台管理系统
最近工作不是很忙,自己在学习vue,在网上找了一个简单的项目练练手..... 这是本人的gitHub 上的项目地址:https://github.com/shixiaoyanyan/vue-admin ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示
一.引言 做京东账户项目中的购物车模块,功能之二是购物车列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.小功能-点击“去购物车结算” 小坑:Ajax动态生成的不能直接绑定,因 ...
- 我的第一个python web开发框架(2)——一个简单的小外包
第一部分说明 第一部分大概有20来章,主要讲的是一些开发常识.开发前中后期准备内容.开发环境与服务器部署环境安装设置.python基础框架结构与功能等内容,代码会比较简单. 本系列会以故事的方式,向大 ...
- axios 学习笔记
官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...
- 微软的一篇ctr预估的论文:Web-Scale Bayesian Click-Through Rate Prediction for Sponsored Search Advertising in Microsoft’s Bing Search Engine。
周末看了一下这篇论文,觉得挺难的,后来想想是ICML的论文,也就明白为什么了. 先简单记录下来,以后会继续添加内容. 主要参考了论文Web-Scale Bayesian Click-Through R ...