Question

我有一个表，如果我追加行和表数据，tr元素内容似乎被阻止我甚至无法在创建它后从控制台编辑它我认为它被td阻止

<table id='product_table' name='product_table' align='center'>
  <tbody>

  </tbody>
</table>


$("#product_table tbody")
  .append("<tr style='cursor:pointer;' data-id='21'>")
  .append("<td>data21</td>")
  .append("</tr>");

$("table#product_table tbody").on("click", "td", function() {
  console.log('wtf');
  console.log($(this).data('id'));
});

如果我不附加tr和td我可以用tr替换td单击选择器并且它可以工作，但如果我追加它我对该行做的任何事情都有任何影响，即使我添加css我可以看到它如果我检查它，但它没有显示或像光标一样工作：指针，但如果我将它们动态地放在td元素上它就可以工作。任何建议都非常感激。

新工作代码

      for (i=0;i<res.data.length;i++) {  

        $("#product_table tbody")
          .append("<tr style='cursor:pointer;' data-id='"+res.data[i].id+"'>" +  
              "<td>"+res.data[i].productNumber+"</td>" + 
              "<td>"+res.data[i].description+"</td>" + 
              "<td>"+res.data[i].productSize+"</td>" + 
              "<td>"+res.data[i].boxLength+"</td>" + 
              "<td>"+res.data[i].boxWidth+"</td>" + 
              "<td>"+res.data[i].boxHeight+"</td>" + 
              "<td>"+res.data[i].avgBilled+"</td>" + 
              "<td>"+res.data[i].productWeight+"</td>" + 
              "<td>"+res.data[i].boxQty+"</td>" + 
              "</tr>"
              );                       
      }


        $("table#product_table tbody").on("click", "tr", function(){
          console.log($(this).data());
        });

Answer 1

渲染时未正确形成追加。请检查元素，你会发现td不在tr元素内。

 $("#product_table tbody")
            .append("<tr style='cursor:pointer;' data-id='21'><td>data21</td></tr>")

        $("table#product_table tbody").on("click", "td", function () {
            console.log('Working.');
            console.log($(this).parent().data('id'));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<table id='product_table' name='product_table' align='center'>
        <tbody></tbody>
    </table>

Answer 2

附加不能以这种方式工作。附加元素时，只需将其命名为;追加（'div'）并自动打开和关闭div。所以你必须创建元素tr然后添加它的属性，之后你创建td并设置它的innerHTML。将td附加到tr中并将tr附加到表中。不要使用/ tr追加。追加将动态创建的元素放入目标元素的末尾。创建元素的最佳方法是document.createElement（'tr'）;.希望这有帮助

Answer 3

你的活动''这个'是'td'，但你试图引用'tr'，它是'td'的兄弟，而不是孩子。我改为let rootRef = Database.database().reference() rootRef.observe(.value, with: { snapshot in print("dump \(snapshot.children.allObjects)") })并且它有效。请参阅代码段。

$(this).siblings('tr').data('id')

$(function() {
  $("#product_table tbody")
    .append("<tr style='cursor:pointer;' data-id='21'>")
    .append("<td>data21</td>")
    .append("</tr>");

  $("#product_table tbody").on("click", "td", function() {
    console.log('wtf');
    console.log($(this).siblings('tr').data('id'));
  });
});

#product_table {
  border: 1px #ccc solid;
  width: 100%;
}

动态td阻塞tr元素

3 个答案: