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("請選擇一行！");
                    }
                }
            },