Question

当我点击按钮时，我通过Ajax从MySql数据库获取一个包含数据的表。它被显示为Div。我从服务器上的.php脚本获取整个HTML。

...
 $statement->execute();

    echo "   <table id='tableID' onClick='idfromclick(event)' class='table table-bordered table-hover'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Datum</th>
        <th>ID</th>
        <th>Position</th>
        <th>Notiz</th>
      </tr>
    </thead>
    <tbody>  ";

foreach ($statement -> fetchAll() as $result)
{   
    echo "<tr>";
    echo "<td align=center>$result[0]</td>";
    echo "<td align=center>$result[1]</td>";
    echo "<td align=center>$result[2]</td>";
    echo "<td align=center>$result[3]</td>";
    echo "<td align=center>$result[4]</td>";
    echo "</tr>";
}
echo "</tbody>
  </table>";
...

当我点击一行时，我只需要我带的ID

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

现在我希望所选（单击）的行使用不同的颜色，直到单击另一行。

这个适用于本地表

 <table id="blub" class="table table-bordered table-hover">
    <tbody>
        <tr><td>Something..blah blah</td><td>Something...blah blah</td><td>Something...blah blah</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>

      <script> $('table tr').each(function(a,b){
    $(b).click(function(){
         $('table tr').css('background','#ffffff');
         $(this).css('background','#c5e9b8');   
    });
});
      </script>

但它不适用于我的其他（php）表。似乎没有jQuery可以工作？

为什么会这样，我可以让jQuery工作吗？

只有JS的解决方案更长更复杂。

Answer 1

尝试将事件绑定到表而不是每行：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="blub" class="table table-bordered table-hover">
    <tbody>
        <tr><td>Something..blah blah</td>
        <td>Something...blah blah</td><td>Something...blah blah</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>

＆＃13;

这适用于您网页中的所有表格。您的代码中可能发生的事情是您将事件绑定到已创建的表，以便新表不会有事件。

Answer 2

这是因为jQuery在加载时绑定了元素事件。要使其工作，您需要在AJAX调用完成后重新绑定事件。

HTML表背景颜色更改无法使用表格从PHP获取

2 个答案: