js Table表格选中一行变色或者多选 并获取值
使用JQ
<script>
let old, oldColor;
$("#sp_body tr").click(function (i) {
if (old)
oldColor = old.css("background-color", oldColor)
old = $(this)
oldColor = old.css("background-color")
$(this).css("background-color", "#ddd")
if ($(this).find(".my").prop('checked')) {
$(this).find(".my").prop("checked", false); } else {
$(this).find(".my").prop("checked", true); } }); $("#sp_body tr").dblclick(function (i) { if (old)
oldColor = old.css("background-color", oldColor)
old = $(this)
oldColor = old.css("background-color")
$(this).css("background-color", "#ddd")
if ($(this).find("#my").prop('checked')) {
$(this).find("#my").prop("checked", false)
} else {
$(this).find("#my").prop("checked", true)
} }); </script>
if (confirm("你确定要删除吗?")) {
//也可以循环tr查找style
var elment = $("#lsvbody tr[style='background-color: rgba(34, 170, 221, 0.59);']")
if (elment.length > 0) {
for (var i = 0; i < lsvData.length; i++) {
if (lsvData[i].Manage_ID == r.id) {
lsvData.splice(i, 1);
}
}
elment.remove();
$('#scan').text("共扫描:" + lsvData.length + " 箱");
}
else
{
alert("请选择一行!");
}
}
使用JS
1、原始样式:
2、鼠标滑过时:
3、鼠标选中点击某一行
1、先写html语言,当然还是应用的前几天相同的代码,可是多了一点点...
<div id="testDiv" style="width: 60%;margin-left: 10%;margin-top: 50px;height: 1100px;background-color: #f2f2f2;padding: 60px 10px 10px 200px;">
<table width="100%" height="100px" border="1px" id="tad" onmouseover="getrow(this)" onmouseout="backrow(this)" onclick="selectRow(this)">
<tr><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td></tr>
<tr><td>5</td><td>1</td></tr>
</table>
<input type="button" onclick="b()" value="add">
<input type="button" onclick="c()" value="delRow">
<input type="button" onclick="d()" value="delCol">
</div>
看出区别在哪了么,对就是在table上多了onclick、onmouseover和onmouseout等事件,并且事件传递的參数时table对象本身
2、javascript实现对应的效果
function getrow(obj){
if(event.srcElement.tagName=="TD"){
curRow=event.srcElement.parentElement;
curRow.style.background="yellow";
}
}
function backrow(obj){
if(event.srcElement.tagName=="TD"){
curRow=event.srcElement.parentElement;
curRow.style.background="#f2f2f2";
}
}
function selectRow(obj){
if(event.srcElement.tagName=="TD"){
curRow=event.srcElement.parentElement;
curRow.style.background="blue";
alert("这是第"+(curRow.rowIndex+1)+"行");
}
}
这里的编码有一个最关键点:
event.srcElement.tagName和event.srcElement.parentElement在这里的应用;
event是触发时间的源对象,而srcElement则就是选中对象,而parentElement则是选中对象的父层对象;以当前的样例来简单解释的话,就是说,鼠标放上table,从而激活了时间getrow(this),当鼠标放在任一单元格之上时,它的srcElement都是 td,并且它的parentElement也就是tr一行了,则找到一行的对象了,对它的操作就回到最主要的那些開始了啊
多选的话改动一些就行
function selectRow(obj) {
if (event.srcElement.tagName == "TD") {
curRow = event.srcElement.parentElement;
if (curRow.style.background == "blue") {
curRow.style.background = "#f9f9f9";
}
else {
curRow.style.background = "blue";
}
}
}
delte: function () {
if (confirm("你确定要删除吗?")) {
var index = 1;
$('#lsvbody tr').each(function (i, r) {
if (r.style.background == "blue") {
index = 0;
$(this).remove();
//根据条件删除数组的的对象
for (var i = 0; i < lsvData.length; i++) {
if (lsvData[i].id == r.id) {
lsvData.splice(i, 1);
}
}
}
});
if (index==1) {
alert("请选择一行!");
}
}
},
js Table表格选中一行变色或者多选 并获取值的更多相关文章
- 基于jquery的表格动态创建,自动绑定,自动获取值
最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...
- 使用js为表格添加一行
今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
- (转)适用微信小程序的table表格(带隔行变色)
原文地址 table.wxml <view class="table"> <view class="tr bg-w"> <view ...
- js隐藏表格的一行数据
1.方法 document.getElementById('customerAccount_tr').style.display="";//缴纳人名称显示 document.get ...
- Js 遍历json对象所有key及根据动态key获取值
var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 文章来自:https://z ...
- js搜索相同类型的控件全选、取值(Checkbox)
function selectAll(obj) { if (obj.checked) { $("input[type='checkbox']").each(function () ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- Table表格的一些操作
首先创建一个table表格: <input type="button" id="btn1" value="获取数据" /> &l ...
- JS实现table表格在鼠标移动出现一行变色或者十字叉变色
1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...
随机推荐
- python接口测试2-开发WEB接口
首先要安装flask包: pip install flask 开发一个简单的API接口 # 1. 导入包 from flask import Flask, request # 2. 实例化一个 app ...
- macOS tips
1.设置常用linux命令的快捷键 打开terminal command+space,搜索"terminal"关键字 进入"~/"目录 cd ~/ touch ...
- 锐安信sslTrus与GeoTrust SSL证书的对比
当您想要为您的网站购买一款SSL证书时,是不是既想要价格便宜,又想要安全性能服务好的证书,最后又在品牌上犹豫不决?如何选择SSL证书?哪款SSL证书是最适合您的?本文将详细对比分析锐成信息平台上畅销品 ...
- uni搜索功能实现
uni搜索功能的实现
- C语言--计算代码段运行时间
c语言中有专一包含计算时间函数的头文件,time.h.当我们需要计算某段程序运行的时间时就需要用到time.h包含的clock()函数,在这里介绍一下如何使用这个函数计算代码运行时间. clock函数 ...
- 微软最强 Python 自动化工具开源了!不用写一行代码!
1. 前言 最近,微软开源了一款非常强大的 Python 自动化依赖库:playwright-python 它支持主流的浏览器,包含:Chrome.Firefox.Safari.Microsoft E ...
- 第15.20节 PyQt(Python+Qt)入门学习:QColumnView的作用及开发中对应Model的使用
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 在Qt Designer的Item Views(Model-based)部件中,Colum ...
- PyQt(Python+Qt)学习随笔:QTableView的标题表头相关属性
老猿Python博文目录 老猿Python博客地址 一.概述 在Qt Designer中,对于表视图QTableView,在属性在下面有专门一栏列出了跟标题相关的属性,如图: 这些属性并不是QTabl ...
- web文件包含
web安全~文件包含总结 文章来自freebuf,作者总结的很好,所以拿来做笔记用!!! 0×01 文件包含简介 服务器执行PHP文件时,可以通过文件包含函数加载另一个文件中的PHP代码,并且当P ...
- 冲刺Day3
每天举行站立式会议照片: 昨天已完成的工作: 1.完成登录注册的后台代码. 2.确定商品查找的接口. 3.尝试与数据库连接. 今天计划完成的工作: 成员 任务 高嘉淳 完成用户信息管理的部分功能 覃泽 ...