JQuery将td附加到特定th

Question

我有一个table几个th元素，每个元素都有一个唯一的值。

我想追加一个td匹配td值与th值并追加它在相同的顺序。

我试过这段代码，但它在相同的th之后附加数据！我想要td在tr的新行中。

$("<td>" + data[i][0].counter + "</td>").insertAfter("#datatable th[value='"+data[i][d].orderStatus+"']").trigger("create"); 

Answer 1

$("<td>" + data[i][0].counter + "</td>") 
        .insertAfter("#datatable th[value='"+data[i][d].orderStatus+"']") 
        .trigger("create"); 

我假设所有这一切都在一个循环中，并与该假设正在发生，这是什么，我会工作过的。首先，我将从头开始介绍您的代码，以帮助您了解一些内容。

$（ “” +数据[I] [0] + .counter “”）

正如你可以或可能不意识到，在$("x") jQuery是相当于使用CSS选择器。举例来说，如果我想设置有一类.example-div所有<div>元素有一个黑色的背景与jQuery - 我可以用下面这样做：

<div class="example-div">Hello, World!</div> 

<script> 
    $('.example-div').css({"background-color":"#000000"}); 
    /* OR if I wanted to set all divs to have a black background. */ 
    $('div').css({"background-color":"#000000"}); 
</script> 

在选择放置物理性的标签与<>将最可能会导致问题。首先，您必须选择您希望与之交互的元素（s）。在你的情况下，根据你的需要，以下可能会工作。

$("#datatable th[value='"+data[i][d].orderStatus+"']") 

另外，看看我对选择器所做的更改。我在#datatable之后删除了>。大于字符（>）选择直接子女，<th>不是<table id="datatable">的子女。这是<tr>孩子中，然后在这个例子中所示的<thead>子：（<table><thead><tr><th>）这样的情况：这会工作在以下几点：

$("#datatable > thead > tr > th")

现在对你的代码的下一部分：

InsertAfter（ “＃的DataTable日[值= ' ”+数据[I] [d] .orderStatus +“']”）

我通过看这就是你的意思，当你明白WRO它。您需要在包含值data[i][d].orderStatus的<th>标记之后插入"<td>" + data[i][0].counter + "<td>"。你已经有效地得到了相反的结果，因为你试图在html之后插入选择器。这里是应该工作：

$("#datatable th[value='"+data[i][d].orderStatus+"']").after("<td>" + data[i][0].counter + "</td>"); 

注：请注意，我用的after代替insertAfter，这是无关紧要的。

.after（）和.insertAfter（）方法执行相同的任务。 [（& InsertAfter后）] [1] [1]：http://api.jquery.com/insertafter/

我不知道你想什么事件与create触发，但你还可以在结束时，如果它仍然是必要的连锁这一点。

$("#datatable th[value='"+data[i][d].orderStatus+"']").after("<td>" + data[i][0].counter + "</td>").trigger("create");