jquery - 使用选择框突出显示表格元素 - Jquery

Question

我想使用选择框为与所选元素共享相同 3 个数据值的所有元素着色。它仅适用于第一个选择，但不适用于并发选择。在我的 for 循环中，控制台没有显示我期望它做什么？我一定是遗漏了一些习惯于 Jquery 本身的东西。

这是JS:

function setColor(){
        $('input').on('click', function(){
        var src, // packet source
            dst,
            proto;// 

        var $selectedRow = $("tr[class='selectedrow']"); // get selected row

            color = $(this).val(); // grab selected color from radio button
            console.log(color);


        $tdelements = $selectedRow.children();  //get td elements of selected row
        src = $tdelements.eq(2).text(); // grab source 
        dst = $tdelements.eq(3).text(); // grab destination
        proto = $tdelements.eq(4).text(); // grab protocol

            var $tr = $('tr'); // grab entire <tr> of document.

            console.log($tr.eq(0).children());

            // loop through individual <tr> elements and compare fields with the filter.
            for(var i=0; i < $tr.length; i++){
               $tdelements =  $tr.eq(i).children(); // grab elements of the ith tr element
                console.log($tdelements.eq(i));
               if($tdelements.eq(2).text() === src && $tdelements.eq(3).text() === dst && $tdelements.eq(4).text() === proto){
                   $tr.eq(i).removeClass(color);
                   $tr.eq(i).addClass(color);
               }
            }
        }); 

}




// Dom Ready
$(document).ready(function(){
    $('tbody').on('click', 'tr', function(){
        $('tr').removeClass('selectedrow');
        $(this).addClass('selectedrow') ;
    });
    setColor();
});

这是一个 fiddle :https://jsfiddle.net/senpaifiddler/ztd1Ltux/

Answer 1

您可以使用 var $selectedRow = $("tr.selectedrow") 获取选定的行.

您需要使用删除以前应用的类

$tr.removeClass('red')
  .removeClass('green')
  .removeClass('blue')
  .removeClass('yellow');

而且，我们不需要 removeClass在任何元素上添加相同的类之前。这就是我更新的原因

$tr.eq(i).removeClass(color);
$tr.eq(i).addClass(color);

到

$(this).addClass(color);

哪里this是您当前在 $.each 中的元素循环。

另外，我修改了代码以迭代<tr>使用 $.each .

此外，我添加了 <label> radio 的简化选择。

更新:发布你的代码

1. $("tr[class='selectedrow']") :它选择只有“selectedrow”类的元素，这在第一次运行时运行良好。之后，当你添加一个新类时，让我们说“红色”，你的 selectedrow类现在变为 selectedrow red .可以通过$("tr[class='selectedrow red']")检索.
2. $tr.eq(i).removeClass(color);
$tr.eq(i).addClass(color);
   在第一次运行中，假设您选择了“红色”颜色，它将添加“红色”类。之后，您选择了“绿色”，它会做什么，它将从 $(tr).eq(i) 中删除“绿色”类然后添加“绿色”类。但是，你的 selectedrow包含“红色”类。它将如何删除之前选择的颜色('红色')？

试试这个片段。

console.clear();

function setColor() {
  $('input').on('click', function() {
    var src, // packet source
      dst,
      proto; // 

    var $selectedRow = $("tr.selectedrow"); // get selected row

    color = $(this).val(); // grab selected color from radio button


    $tdelements = $selectedRow.children(); //get td elements of selected row
    src = $tdelements.eq(2).text(); // grab source 
    dst = $tdelements.eq(3).text(); // grab destination
    proto = $tdelements.eq(4).text(); // grab protocol

    var $tr = $('tr'); // grab entire <tr> of document.

    $tr.removeClass('red')
      .removeClass('green')
      .removeClass('blue')
      .removeClass('yellow');

    // loop through individual <tr> elements and compare fields with the filter.
    $tr.each(function() {
      $tdelements = $(this).children(); // grab elements of the ith tr element
      if ($tdelements.eq(2).text() === src && $tdelements.eq(3).text() === dst && $tdelements.eq(4).text() === proto) {
        $(this).addClass(color);
      }
    });

  });

}

// Dom Ready
$(document).ready(function() {
  $('tbody').on('click', 'tr', function() {
    $('tr').removeClass('selectedrow');
    $(this).addClass('selectedrow');
  });
  setColor();
});

html,
body,
.container {
  height: 100%;
}
body {
  font-family: verdana;
  font-size: 10px;
}
.container {
  background: #f6f6f6;
}
.selectedrow {
  color: aqua;
  background: white;
}
.red {
  color: red;
  background: white;
}
.green {
  color: green;
  background: white;
}
.yellow {
  color: yellow;
  background: white;
}
.blue {
  color: blue;
  background: white;
}
label {
  display: inline-block!important;
  margin-right: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="JQuery: Highlight table elements with selection box">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>


</head>

<body>

  <body>
    <div class="container">
      <table class="table">
        <tbody>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>src</td>
            <td>dst</td>
            <td>protocol</td>
            <td>data</td>
          </tr>
        </tbody>
      </table>
      <div>
        <input type="radio" name="color" id="radRed" value="red">
        <label for="radRed">Red</label>
        <input type="radio" name="color" id="radBlue" value="blue">
        <label for="radBlue">Blue</label>
        <input type="radio" name="color" id="radGreen" value="green">
        <label for="radGreen">Green</label>
        <input type="radio" name="color" id="radYellow" value="yellow">
        <label for="radYellow">Yellow</label>
      </div>

    </div>
  </body>

</body>

</html>