建立一個動態的行和單元格使用jquery

<html><head> 
<link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/style.css" /> 
<script type="text/javascript" src="file:///C:/Users/Documents/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="file:///C:/Users/Documents/jquery.tablesorter.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    load(); 
}); 

var map1 = { "iDate":"test_value1", "iName":"test_value2" , "iFile":"test_value3" }; 
var map2 = { "iDate":"nexttest_value1", "iName":"nexttest_value2", "iFile":"nexttest_value3" }; 

var list = new Array(map1, map2); 
list[0] = map1; 
list[1] = map2; 

function load() { 
    var beginTD = $("<td><div class='scroll-pane horizontal-only' style='vertical-align: top'>"); 
    var endTD = $("</div></td>"); 

jQuery.each(list, function(index, map) { 
$("#hpTable > tbody:last").append($("<tr>")); 
    jQuery.each(map, function(key, value) { 
     var pTag = $("<p id='" + key + "'>" + value + "</p>"); 
      $("#hpTable td:last").append(beginTD, pTag, endTD); 
     }); 
    $("#hpTable").append($("</tr>")); 
    }); 
}; 
</script> 
</head> 
<body> 
<br> 
<table id="hpTable" cellpadding="5" width="100%" style="table-layout:fixed" class="tablesorter"> 
<thead><tr> 
    <th width="9%">Date</th> 
    <th width="9%">Name</th> 
    <th>File</th> 
</tr> 
</thead> 
<tbody></tbody> 
</table> 
</body 
</html>

大家好！感謝您審查我的第二篇文章。我是一個jquery新手，並尋找找出爲什麼我不能動態地建立一個行和單元格？任何幫助表示讚賞！建立一個動態的行和單元格使用jquery

來源

2012-03-23 sasims

你不能使用append（）向DOM添加元素片段（例如，在一次調用中加入''，然後加上''如預期其他呼叫將無法正常工作），你只能追加整個元素，所以你將不得不重新設計你的策略。如果你給我們介紹一下你想達到什麼，我們也許能幫助你這樣做的更多信息。 – 2012-03-23 16:27:00

喜弗雷德裏克，我想動態創建一個行循環通過地圖的列表（字符串，字符串）。 – sasims 2012-03-23 16:30:37

至於說弗雷德裏克哈米迪，你不打開和jQuery的結束標記，你只需添加內的另一個標籤，並把它作爲簡單的變量做一些東西吧。

那麼你的「每個」分析應該是這樣的：

jQuery.each(list, function(index, map) { 
    // you create a tr tag and attached it to your table body 
    var trTag = $("<tr></tr>").appendTo($("#hpTable > tbody")); 
    jQuery.each(map, function(key, value) { 
      var tdTag = $('<td/>').appendTo(trTag); 
      var divTag = $("<div class='scroll-pane horizontal-only' style='vertical-align: top'/>").appendTo(tdTag); 
      var pTag = $("<p id='" + key + "'>" + value + "</p>").appendTo(divTag); 
     }); 
    }); 
};

來源

2012-03-23 16:38:21 Mordhak

感謝Mordhak，這個工作奇妙！並感謝迴應如此之快......本網站的岩石和所有誰貢獻的人！ :) – sasims 2012-03-23 17:41:46

@sasims你可以說「謝謝」，接受這個答案。Mordhak將獲得聲望點數。不要忘了VOT E的答案也是如此。謝謝 – 2012-03-23 22:14:46

如果你要建立的HTML表格，你會在一個簡單的JavaScript字符串建立起來獲得更好的性能，然後在最後追加到DOM。這樣的事情：

function load() { 
    var html = []; 
    var beginTD = "<td><div class='scroll-pane horizontal-only' style='vertical-align: top'>"; 
    var endTD = "</div></td>"; 

    jQuery.each(list, function(index, map) { 
     html.push('<tr>'); 
     jQuery.each(map, function(key, value) { 
      html.push(beginTD, "<p id='" + key + "'>" + value + "</p>", endTD); 

     }); 
     html.push('</tr>'); 
    }); 

    $("#hpTable tbody").append(html.join('\n')); 
};

我編輯我的原始解決方案，建立一個數組並加入換行符。這比'+ ='級聯運算符更有效率，特別是在IE中。

來源

2012-03-23 16:39:00

丹A，感謝您的反饋。我嘗試過這種方法，但無法使用它......我一定錯過了什麼？但是，Mordhak的帖子運行良好。再次感謝！ – sasims 2012-03-23 17:40:18

@sasims這似乎爲看做工，看我的測試：http://jsfiddle.net/6q7BS/ – 2012-03-23 18:17:29

建立一個動態的行和單元格使用jquery

回答

相關問題