码迷,mamicode.com
首页 > Web开发 > 详细

js Table 表格选中一行变色并获取该行值

时间:2020-07-03 21:33:17      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:class   对象   img   html语言   鼠标   vbo   name   区别   表格   

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 表格选中一行变色并获取该行值

标签:class   对象   img   html语言   鼠标   vbo   name   区别   表格   

原文地址:https://www.cnblogs.com/netlock/p/13232357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!