如何用字典對象更新表的最後一列？

Question

我有一個表，其中需要用動態生成的字典鍵值pair.The改爲下文每一行的最後一列是我的表結構，

<table id="example"> 
<tr> 
    <td>Title</td> 
    <td>T1</td> 
</tr> 
<tr> 
    <td>Description</td> 
    <td>D1</td> 
</tr> 
</table> 

我想在最後追加另一列每行。就這樣，

<table id="example"> 
<tbody> 
<tr> 
    <td>Title</td> 
    <td>T1</td> 
    <td>T2</td> 
</tr> 
<tr> 
    <td>Description</td> 
    <td>D1</td> 
    <td>D2</td> 
</tr> 
</tbody> 
</table> 

我有我這個輸入

VAR字典= { 「T1」： 「T2」， 「T2」： 「D2」 } 我怎麼會使用JQuery來做到這一點？

Answer 1

它可以通過下面的代碼實現，

var dict = { 
 
      "t1": "T2", 
 
      "t2": "D2" 
 
      } 
 
var count = 0; 
 
$.each (dict, function (field, value) { 
 
    $('#example tr').each(function() { 
 
     if($("tr").index(this) == count){ 
 
       $(this).find('td:last').after('<td>' + value + '</td>'); 
 
      } 
 
     }); 
 
    count++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table id="example"> 
 
    <tr> 
 
     <td>Title</td> 
 
     <td>T1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Description</td> 
 
     <td>D1</td> 
 
    </tr>

Answer 2

使用下面的代碼：

// append the <td> inside each found <tr> in the table 
$("#example > tr").each(function(index){ 
    $(this).append("<td>" + value[index] + "</td>"); 
}); 

Answer 3

可以使用last()函數獲取最後td在每個tr通過使用j查詢選擇這樣的：

var dict = { 
 
    "t1": "T2", 
 
    "t2": "D2" 
 
} 
 
var index = 0; 
 

 
function start() { 
 
    var x = $('#example tr') 
 
    for (i = 0; i < x.length; i++) { 
 
    row = x[i] 
 
    var valInDic = index == 0 ? dict.t1 : dict.t2; 
 
    index++; 
 
    $(row).append('<td>' + valInDic + '</td>') 
 
    if (index == 2) 
 
     index = 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="example"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Title</td> 
 
     <td>T1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Description</td> 
 
     <td>D1</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table> 
 
<button onclick=start() ">Start</button>

我希望這有助於;）