建立一个动态的行和单元格使用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

回答

相关问题