使用選擇框突出顯示錶格元素 - 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

回答

相關問題