javascript - 如何创建一个单元格不可点击的表格

Question

我需要制作一个表格来选择带有条件的数组的过滤器，例如过滤器的表格开头（您不能同时选择客户端和用户）：

为此，我按单元格创建了一个带有 id 的表：

jQuery(document).ready(function($) {

    filter = {
        date: 0,
        client: 0,
        user: 0
    };

    $(".blank_row > td").click(function() {
       if (filter['date'] == 0 && $(this).attr('id') == 'date') {
            filter[$(this).attr('id')] = 1;
            $(this).addClass("bg-success");
        }
        else if (filter['date'] == 1 && $(this).attr('id') == 'date') {
            $(this).removeClass("bg-success");
            filter[$(this).attr('id')] = 0;
        }
    
        if (filter['client'] == 0 && filter['user'] == 0 && $(this).attr('id') != 'date') {
            filter[$(this).attr('id')] = 1;
            $(this).addClass("bg-success");
        } else if (filter['client'] == 1 || filter['user'] == 1) {
            $(this).removeClass("bg-success");
            filter[$(this).attr('id')] = 0;
        }
    
        console.log($(this).attr('id'));
        console.log(filter);
    });

});

.blank_row {
    height: 50px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<table id="graphTable" class="table table-sm table-bordered">
            <thead>
                <tr>
                    <th class="border" colspan="3">FILTER</th>
                </tr>
                <tr>
                    <th>DATE</th>
                    <th>CLIENT</th>
                    <th>USER</th>
                </tr>
            </thead>
            <tbody>
                <tr class="blank_row">
                    <td id="date"></td>
                    <td id="client"></td>
                    <td id="user"></td>
                </tr>
            </tbody>
        </table>

但是如果我想添加新的单元格，我很快就会迷失在我已经制作的代码中。您还有其他解决方案可以更简单地完成我想要的操作吗？

标签： javascripthtmljquerybootstrap-4

Answer 1

您可以使用hasClassjquery 的方法来查看是否tds有所需的类，这取决于我们可以addClass或removeClass来自任何特定tds的 .

演示代码：

$(document).ready(function($) {

  $(".blank_row > td").click(function() {
  //get td closest tr(index)
    var rowIndex = $(this).closest("tr").index();
    //getting cell no of td which is clicked
    var cell = $(this).index();
    //looping over the tr
    $('tbody > tr:eq(' + rowIndex + ') ').each(function(cellIndex){
    
      var selectors = $(this).find("td:eq(" + cell + ")");
  //checking if the clicked td has some classes or not
   if (!(selectors.hasClass("bg-success")) && (selectors.hasClass("date"))) {
        //add
        selectors.addClass("bg-success");
      } else if (selectors.hasClass("date") && selectors.hasClass("bg-success")) {
        //removed
        selectors.removeClass("bg-success");
      }
 //checking if the client and user has bg-success or not
      if (!($(this).find(".client").hasClass('bg-success')) && !($(this).find(".user").hasClass('bg-success')) && !(selectors.hasClass("date"))) {
        //add
        selectors.addClass("bg-success");
      } else if ((($(this).find(".client").hasClass('bg-success')) || ($(this).find(".user").hasClass('bg-success'))) && !(selectors.hasClass("date"))) {
        //removed
        selectors.removeClass("bg-success");
      }

   });
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="graphTable" class="table table-sm table-bordered">
  <thead>
    <tr>
      <th class="border" colspan="3">FILTER</th>
    </tr>
    <tr>
      <th>DATE</th>
      <th>CLIENT</th>
      <th>USER</th>
    </tr>
  </thead>
  <tbody>
    <tr class="blank_row">
      <td class="date">a</td>
      <td class="client">b</td>
      <td class="user">c</td>
    </tr>
    <tr class="blank_row">
      <td class="date">a1</td>
      <td class="client">b1</td>
      <td class="user">c1</td>
    </tr>
    <tr class="blank_row">
      <td class="date">a2</td>
      <td class="client">b2</td>
      <td class="user">c2</td>
    </tr>
  </tbody>
</table>