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");