[英]JQuery - Adding an html table column to end of table based on array data
[英]Adding array data to HTML Table
我將數據數組添加到表中時遇到問題。 Firebug中沒有顯示錯誤消息,並且沒有使用$("#tbNames tr:last").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
將數據作為行添加到表中$("#tbNames tr:last").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
。
邏輯(JavaScript)
<script type="text/javascript">
var data = [];
data.push("Coco", "Mandy");
data.push("Suzze", "Candy");
data.push("Janny", "Jacky");
$(document).ready(function() {
$('#btnAdd').live('click', function() {
var name = $('#txtName').val();
var name2 = $('#txtName2').val();
$("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
});
$('#tbNames td img.delete').live('click', function() {
$(this).parent().parent().remove();
});
$("#insert_data").click(function() {
for(var i=0; i<data.length; i++){
$("#tbNames tr:last").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
}
});
});
</script>
HTML表格
<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" border="1" >
<tr>
<th>Name</b></th>
<th>Name2</b></th>
<th>Delete</b></th>
</tr>
<tr>
<td>Bingo</td>
<td>Tingo</td>
<td><img src="Delete.gif" height="15" class="delete" /></td>
</tr>
</table>
<input id="insert_data" type="button" style="height: 35px; width: 225px" value="Retrieve Default User" />
如果我錯過任何事情,請告知。 謝謝。
(明天將插入到解決方案文本區域,因為我收到此消息Users with less than 100 reputation can't answer their own question for 8 hours after asking. You may self-answer in 7 hours. Until then please use comments, or edit your question instead.
錯誤1
改變
data.push("Coco", "Mandy");
data.push("Suzze", "Candy");
data.push("Janny", "Jacky");
至
data.push(["Coco", "Mandy"]);
data.push(["Suzze", "Candy"]);
data.push(["Janny", "Jacky"]);
錯誤2
改變
$("#insert_data").click(function() {
for(var i=0; i<data.length; i++){
$("#tbNames tr:last").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
}
});
至
$("#insert_data").click(function() {
for(var i=0; i<data.length; i++){
$("#tbNames tr:last").after("<tr><td>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
}
});
數據清單包含:['Coco','Mandy','Suzze','Candy','Janny','Jacky']
因此,當前您的代碼產生:
<tr><td>Coco</td><td>Suzze</td><td><img ...etc></td></tr>
<tr><td>Coco</td><td>Suzze</td><td><img ...etc></td></tr>
<tr><td>Coco</td><td>Suzze</td><td><img ...etc
你的意思是寫:
$("#insert_data").click(function() {
for(var i=0; i<data.length-1; i=i+2){
$("#tbNames tr:last").after("<tr><td>" + data[i] + "</td><td>" + data[i+1] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
}
});
這是您的解決方案。 指出不同 :)。
$(document).ready(function() {
var data = [];
data.push("Coco", "Mandy");
data.push("Suzze", "Candy");
data.push("Janny", "Jacky");
$(document).ready(function() {
$('#btnAdd').live('click', function() {
var name = $('#txtName').val();
var name2 = $('#txtName2').val();
$("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
});
$('#tbNames td img.delete').live('click', function() {
$(this).parent().parent().remove();
});
$("#insert_data").click(function() {
for (var i = 0; i < data.length; i++) {
$("#tbNames tr:last").after("<tr><td>" + data[i++]
+ "</td><td>" + data[i]
+ "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.