使用选择框突出显示表元素 - 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();
});

这是一个小提琴：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循环中的当前元素。

此外，我已修改代码以使用$.each.

迭代<tr>

另外，我为收音机添加了<label>以简化选择。

更新：发布您的代码

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

试试这个代码段。

＆＃13;
＆＃13;
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();
});
＆＃13;
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;
}
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;