如何 select 每一行并突出显示/取消选择每一行并从数据 api 调用中突出显示

Question

这是我开始时的桌子

<div class= "col-md-7" id = "recyclable-list" >
            
                                <table class="table">
                                <thead>
                                  <tr>
                                    <th style=" padding-left:25px;";>RecyclableID</th>
                                    <th style=" padding-left:100px;">Name</th>
                                    <th style=" text-align: center;">RecyclableType</th>
                                  </tr>
                                </thead>
                                <tbody id="recycleTable">

                                </tbody>
                                
                              </table>  

这是我对数据库的脚本调用

var myarray = [];


                            $.ajax({
                            
                                url:"https://ecoexchange.dscloud.me:8080/api/get",
                        
                                method:"GET",
                                // In this case, we are going to use headers as
                                headers:{
                                    // The query you're planning to call
                                    // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
                                    query:"RecyclableGet(0)",
                                    
                                    // Gets the apikey from the sessionStorage
                                    apikey:sessionStorage.getItem("apikey")
                                },
                    
                                success:function(data,xhr,textStatus) {
                                
                                myarray = data;
                                buildTable(myarray);
                                console.log(myarray);
                                

                                },

                                error:function(xhr,textStatus,err) {
                                    console.log(err);
                                }
                            });

                            function buildTable(data){
                                var table = document.getElementById("recycleTable")

                                for(var i = 0; i < data.length; i++){
                                    var row = `<tr>
                                                <td>${data[i].RecyclableID}</td>
                                                <td>${data[i].Name}</td>
                                                <td>${data[i].RecyclableType}</td>
                                        </tr>`

                                        table.innerHTML += row
                                        
                                }
                            };
                            

这是我的亮点 Js 文件

$( document ).ready(function() {
     $("#recyclable-list").on('click',function() {
      var selected =  $('#recycleTable tr').on('click',async function(){
         await $('#recycleTable tr').removeClass('highlight');
        $(this).addClass('highlight');
         
        });

        $("#edit").prop('disabled',false);
        $("#edit").removeClass('btn btn-secondary');
        $("#edit").addClass('btn btn-primary');
        $("#delete").prop('disabled',false);

      if (!selected)
      $(this).find('#recycleTable tr').addClass("highlight") & $('#recycleTable tr').removeClass('highlight');
    
        else 
        $("#edit").prop('disabled',true) & $("#delete").prop('disabled',true) & $("#edit").removeClass('btn btn-primary') & $("#edit").addClass('btn btn-secondary');;
        
        
    });
  });

这是我的 css 风格的亮点

    .recycleTable.highlight{
         background-color: #ddd;
        }

但是现在的亮点是选择整个表格行而不是逐行，有没有人知道如何将其更改为 select 每行而不是整行？

现在选定的整个表格已修复，但是我无法取消选择我选择的行，并且在选择一行时按钮未启用

Answer 1

tbody 上的点击事件？ 不是一个好主意，我建议您将代码更改为：

...
$("#recyclable-list").on('click',function() {
  var selected = $(this).find('#recycleTable').hasClass("highlight");
  ...
  if (!selected)
    $(this).find('#recycleTable').addClass("highlight");
...

Answer 2

您关心呼叫 id，但您的声明是 class。 从 更改. 到#如#recycleTable.highlight

Answer 3

首先，永远不要使用#id ，使用class ，否则你会妨碍你的代码——如果你使用的是 jQuery 尤其如此。 #id在诸如 Bootstrap 插件之类的情况下很有用，但在其他情况下就没什么用了。 下面的示例仅使用类。

这将只允许突出显示单个<tr>并且如果<tr>已经突出显示，则还删除突出显示。

 $('tbody tr').not($(this)).removeClass('highlight'); $(this).toggleClass('highlight');

如果有突出显示的<tr> ，这将禁用<button> >

 const btns = $('.btn-group button'); ... if ($(this).hasClass('highlight')) { btns.prop('disabled', false).removeClass('disabled'); } else { btns.prop('disabled', true).addClass('disabled'); }

请注意，该示例仅处理<table>已经存在<tr>而不是动态创建的<tr> ，但这并不重要。 此外， <button> s 包装在.btn-group中，Bootstrap CSS 的样式会很好，并为<button> s $('.btn-group button')提供更好的选择器。 最后，所有浏览器都将<tbody>添加到<table> ，因此无需将其包含在 HTML 中（除非您想要多个<tbody> ）。

 $(document).ready(function() { const btns = $('.btn-group button'); $("tbody tr").on('click', function() { $('tbody tr').not($(this)).removeClass('highlight'); $(this).toggleClass('highlight'); if ($(this).hasClass('highlight')) { btns.prop('disabled', false).removeClass('disabled'); } else { btns.prop('disabled', true).addClass('disabled'); } }); });

 .highlight { background-color: #ddd; } button { display: inline-block; width: 100px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css" rel="stylesheet"> </head> <body> <main class="fluid-container"> <table class="table"> <thead><tr><th>RecyclableID</th><th>Name</th><th>RecyclableType</th></tr></thead> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>X</td></tr> <tfoot><tr><td colspan='2'></td> <td class='btn-group'> <button class='edit btn btn-primary disabled' disabled>Edit</button> <button class='delete btn btn-danger disabled' disabled>Delete</button> </td> </td> </tfoot> </table> </main> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body> </html>