如何將數組傳遞到html表的最后一行

Question

我已經創建了一個頁面，該頁面具有單擊功能，可以在表的最后一列中創建一個新column 。

該代碼有效，但它使column與我擁有的數組一樣多。 我只想做一個column在我的最后一個表格column 。

 // JavaScript Document $(document).ready(function() { $('#display_data').on("click", function(e) { var myTableArray = []; $(".table-bordered tr").each(function() { var tdValue = ($(this).find("td:eq(4)").text()); var a = 1.000; var b = 10.000; var c = 20.000; var d = 45.000; var callback1 = '10.000'; var callback2 = '20.000'; var callback3 = '37.500'; var callback4 = '45.000'; if (tdValue > a && tdValue < b) { $('.table-bordered').find('tr').each(function() { $(this).find('td').eq(5).after('<td>' + callback1 + '</td>'); }); } else if (tdValue > b && tdValue <= c) { $('.table-bordered').find('tr').each(function() { $(this).find('td').eq(5).after('<td>' + callback2 + '</td>'); }); } else if (tdValue > c && tdValue <= d) { $('.table-bordered').find('tr').each(function() { $(this).find('td').eq(5).after('<td>' + callback3 + '</td>'); }); } else { $('.table-bordered').find('tr').each(function() { $(this).find('td').eq(5).after('<td>' + callback4 + '</td>'); }); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-bordered"> <tbody> <tr> <td>WCB</td> <td>101</td> <td>5006538574</td> <td>10.08.2017</td> <td>30.830</td> <td>KG</td> </tr> <tr> <td>WCB</td> <td>101</td> <td>5006539622</td> <td>10.08.2017</td> <td>21.080</td> <td>KG</td> </tr> <tr> <td>WCB</td> <td>101</td> <td>5006539759</td> <td>10.08.2017</td> <td>40.990</td> <td>KG</td> </tr> </tbody> </table> <button type="submit" id="display_data" class="btn btn-primary">Upload File</button> 

您可以在我的摘錄中查看已完成的column 。 那一column不是我想要的。

我希望column是這樣的：

1. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500
2. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500
3. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500

我希望有人可以幫助我解決我的問題。

Answer 1

由於您已經遍歷了外部循環中的所有<tr>元素，因此無需在條件表達式中再次進行此操作。 相反，您應該使用當前迭代的元素（ $(this) ）：

 // JavaScript Document $(document).ready(function() { $('#display_data').on("click", function(e) { var myTableArray = []; $(".table-bordered tr").each(function() { var tdValue = ($(this).find("td:eq(4)").text()); var a = 1.000; var b = 10.000; var c = 20.000; var d = 45.000; var callback1 = '10.000'; var callback2 = '20.000'; var callback3 = '37.500'; var callback4 = '45.000'; if (tdValue > a && tdValue < b) { $(this).find('td').eq(5).after('<td>' + callback1 + '</td>'); } else if (tdValue > b && tdValue <= c) { $(this).find('td').eq(5).after('<td>' + callback2 + '</td>'); } else if (tdValue > c && tdValue <= d) { $(this).find('td').eq(5).after('<td>' + callback3 + '</td>'); } else { $(this).find('td').eq(5).after('<td>' + callback4 + '</td>'); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-bordered"> <tbody> <tr> <td>WCB</td> <td>101</td> <td>5006538574</td> <td>10.08.2017</td> <td>30.830</td> <td>KG</td> </tr> <tr> <td>WCB</td> <td>101</td> <td>5006539622</td> <td>10.08.2017</td> <td>21.080</td> <td>KG</td> </tr> <tr> <td>WCB</td> <td>101</td> <td>5006539759</td> <td>10.08.2017</td> <td>40.990</td> <td>KG</td> </tr> </tbody> </table> <button type="submit" id="display_data" class="btn btn-primary">Upload File</button>