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错误：

未捕获TypeError：document.getElementById（...）。rows [0] .siblings不是函数

要解决此问题，您可以使用jQuery包装所选元素：

＆＃13;

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');
};

＆＃13;

提供jsfiddle作为参考。

单击表和按钮更改HTML表格背景

1 个答案: