テーブルとボタンをクリックしてHTMLテーブルの背景を変更する

Question

私はテーブルを持っていますが、私はPHPから取得しますが、私はこのテーブルを使用してテストします。

<table id="blub" class="table table-bordered table-hover"> 
    <tbody> 
     <tr><td>Something..blah blah</td><td>Something...blah blah</td><td>third</td></tr> 
     <tr><td>Something ...blah blah</td></tr> 
     <tr><td>Something ...blah blah</td></tr> 
     <tr><td>Something ..blah blah</td></tr> 
    </tbody> 
</table> 

[行]をクリックすると、[色]が変更されます。

$('body').on("click", "table tr", function() { 
    $(this).siblings().css('background','#ffffff'); 
    $(this).css('background','#c5e9b8'); 
}); 

と私は、私は毎回それをクリックしたくないので、主に私は最初の行を必要とする

function idfromclick(e){ 
     localStorage.setItem("ClickID",e.target.parentNode.cells[2].innerHTML);} 

を必要とするセルの値をとります。私は同じものを得るボタンをクリックしたい。私は行をクリックするように色を変更する必要があります。 アラートは表示されますが、色の変更はありません。 どうすればよいですか？

<button type="button" class="btn btn-danger" onClick="testn()">Danger Button</button> 

     <script> 
      function testn() { 
       alert(document.getElementById("blub").rows[0].cells[2].innerHTML); 
      document.getElementById("blub").rows[0].siblings().css('background','#ffffff'); 
      document.getElementById("blub").rows[0].css('background','#c5e9b8'); 
      } </script> 

Answer 1

ない色の変化の理由は、.siblings()と.css()ネイティブDOMエレメントの方法ではない、彼らはjQueryオブジェクトのメソッドです。あなたがDevToolを開き、コンソールをチェックすると、ボタンがクリックされたときに、JavaScriptエラーがスローされます。

Uncaught TypeError: document.getElementById(...).rows[0].siblings is not a function

この問題を解決するには、jQueryを使って選択した要素をラップすることができます

function testn() { 
 
    alert(document.getElementById("blub").rows[0].cells[2].innerHTML); 
 
    $(document.getElementById("blub").rows[0]).siblings().css('background','#ffffff'); 
 
    
 
    $(document.getElementById("blub").rows[0]).css('background','#c5e9b8'); 
 
};

jsfiddleは参照用です。