如果要在TR上单击将TR背景更改为红色，请使用以下代码

Question

我几乎读过关于此的所有文章......只是找不到这个不起作用的原因。我想用jQuery改变我的tr背景色。 Web检查器中没有错误或者什么都没有，只是没有任何反应......

我的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <title>Opravila</title>
    <style>
      .slika 
      {
      width:20px;
      height:20px;
      }
      tr
      {
      background-color:white;
      }

      tr.highlight
      {
      background-color:yellow;
      }

    </style>
  </head>
  <body>
    <script src="script.js" type="text/javascript"></script>
    <form>
      Naslov opravila: <input type="text" id="naslov"></input>
      Vrsta opravila: <input type="text" id="vrsta"></input>
      Nujnost opravila: 
      <select id="nujnost">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type="button" value="Dodaj opravilo" id="dodaj"></input>

    </form>

    <img src="minus.png" class="slika" id="slika"></img>
    <table id="tabela">
      <thead>
        <tr>
          <th>#</th>
          <th>Opravilo</th>
          <th>Vrsta</th>
          <th>Nujnost</th>
          <th>Datum vnosa</th>
        </tr>
      </thead class="vrstica">
      <tbody>
      </tbody>
    </table>

  </body>
</html>

我的jQuery代码:(请注意，我的代码几乎在最后开始）

$(document).ready(function(){
    $("#dodaj").click(function() {
        var naslov=$("#naslov");
        naslov=naslov.val();
        var vrsta=$("#vrsta");
        vrsta=vrsta.val();
        var nujnost=$("#nujnost");
        nujnost=nujnost.val();
        var zaporedna_st=$("#tabela tbody tr").length;

        var datum =new Date();
        datum=datum.getDate()+"."+(datum.getMonth()+1)+"."+datum.getFullYear();

        $("#tabela tbody").append("<tr><td>"+(zaporedna_st+1)+"</td><td>"+naslov+"</td><td>"+vrsta+"</td><td>"+nujnost+"</td><td>"+datum+"</td></tr>");
    });

    $("#tabela tbody tr").click(function() {
        $(this).css("backgroundColor", "red");
    });
});

Answer 1

你需要这样做

$("#tabela tbody").on('click', 'tr', function() {
    $(this).css("backgroundColor", "red");
});

Answer 2

你需要这样做

$("#tabela tbody").on('click', 'tr',function() {
    $(this).css("backgroundColor", "red");
});

您需要使用on，因为tr元素是动态创建的。否则，click事件将不会绑定到新创建的tr元素。

Answer 3

试试这个，

$("#tabela tbody").click(function() {
     $(this).find('tr').css('backgroundColor', 'red');
});

Answer 4

首先，您无法将背景设置为tr标记，仅适用于td

另一点是像这样设置颜色

$('td').css({'backround-color: 'blue'})

对不起我的错误。

真正的背景属性适用于tr

这里我用正确的jQuery选择器

准备你的例子

http://jsfiddle.net/XJb98/

只需点击表格标题（因为在示例中我没有tbody我将其更改为thead）

Answer 5

请试试这个..

$("#tabela :tr").click(function(e) {
    var currentRowId = this.id;
    $("#"+currentRowId ).css("backgroundColor", "red");
});

Answer 6

如果要在TR上单击将TR背景更改为红色，请使用以下代码

//on ready state
$(function(){
  //Change TR background color to red on TR click Event
  $("#tabela").find("tr").on('click', function() {
    $(this).css({"background":"red"});
  });
});

如果要在文档就绪时将TR背景更改为红色，请使用以下代码

//准备就绪状态

$(function(){
  //Change all TR background color to red
  $("#tabela").find("tr").css({"background":"red"});
});

无法使用jQuery更改背景颜色

6 个答案:

如果要在TR上单击将TR背景更改为红色，请使用以下代码

如果要在文档就绪时将TR背景更改为红色，请使用以下代码