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

我想通过使用选择框对与选定元素共享相同3个数据值的所有元素着色。它只适用于第一个选择，但不适用于并发的。在我的循环控制台不显示我期望它做什么？我必须错过习惯于Jquery本身的东西。使用选择框突出显示表格元素 - 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/

来源

2016-11-18 IskandarG

我想，首先需要正确地删除 “颜色” 类。看看https://jsfiddle.net/sL0uLuvb/。第二个是 - 你定义var'color'作为单选按钮的值，然后你这么做：'$ tr.eq（i）.removeClass（color）;'但是这个'tr'可能有另一种颜色，它与选择的按钮不同颜色。 – Banzay

我不想在用户点击桌子时移除颜色。当我从收音机框中选择不同的颜色时，我想要改变当前的颜色。这基本上是这里的问题。 – IskandarG

你可以使用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> S，我已经为了简化选择加入<label>用于无线电的。

更新：问题你的代码

$("tr[class='selectedrow']")：它选择只有 'selectedrow' 类，在第一次运行正常工作的元素。之后，当您添加一个新课程时，可以说“红色”，您的selectedrow课程现在变为selectedrow red。它可以通过$("tr[class='selectedrow red']")检索。
$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>

来源

2016-11-18 11:04:12 sam

此问题解决问题的原因是，当用户选择不同的颜色时，变量全部为空，并导致if语句根本不能执行。我不知道这是否应该被选为正确的答案，因为它不识别错误？除非提供了解释变量为什么变为空的解释，并且为什么您应该使用此方法。 – IskandarG

@IskandarG更新了有问题的答案。让我知道你是否还有其他问题。 – sam

这已经足够好了，不知道如果这个表能够动态扩展，这是否会工作？将测试它并根据需要进行更新。另外，我个人不喜欢使用$ .each（），因为它比较慢，并且常规的旧for循环出了什么问题？ – IskandarG

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

回答

相关问题