我有一个包含一些数据的表:
<table id="myTable">
<thead>
<tr>
<th><h1>Name</h1></th>
<th><h1>Picture</h1></th>
<th><h1>Likes</h1></th>
<th><h1>Time</h1></th>
</tr>
</thead>
<tbody>
***loop***
<tr>
<td>{placeholder1}</td>
<td><img src="{placeholder2}" alt=""></td>
<td><a href="#">{placeholder3}</a></td>
<td>{placeholder4}</td>
</tr>
***end loop***
</tbody>
</table>
我有一个js函数谁通过POST请求每10分钟从服务器获得一些数据。<tr></tr>块需要多次重复。HTML代码变得越来越复杂，我需要一个布局和占位符的解决方案。我需要一个方向来搜索:)我只需要:
- 存储
<tr></tr>模式与占位符插入到我的网页。我如何用js实现它? - 我如何标记需要插入数据的地方?
既然你使用的是jQuery，
这可能是你的HTML
<table>
<tbody id="myTableBody">
<!-- Your elements will be placed here -->
</tbody>
</table>
我假定您使用的是$。Ajax或$。post在这些，添加一个回调函数属性success
$.ajax({
// ... your properties,
success: function(data) {
// basic template for of your "tr"
var trTemplate = [
'<tr>',
'<td></td>',
'<td><img src="" alt=""></td>',
'<td><a href="#"></a></td>',
'<td></td>',
'</tr>'
].join('')
// get the tbody elemen
var $myBody = $('#myTableBody')
// if you want to clean up the current content of $myBody,
// if it is not the case just remove the following line
$myBody.empty()
// assuming data is an array of elements / entities
data.forEach(function(element){
var $tr = $(trTemplate)
$tr.find('td').eq(0).text(element.placeholder1)
$tr.find('img').attr('src', element.placeholder2)
$tr.find('td').eq(2).text(element.placeholder3)
$tr.find('td').eq(3).text(element.placeholder4)
$myBody.append($tr)
})
}
})
这是如何做到这一点的例子，有很多方法可以提高性能等。请仅作为参考
如果您正在使用jQuery，那么这是相当简单的。您需要标识您的元素，以便您可以单独引用它们。假设你以:
开头<tr id="tr-0" >
content...
</tr>
，然后在javascript..
var id = $('#tr-0').attr('id');
var num = parseInt(id.substring(3));
num++;
$('#tr-0').after('<tr id='+num+'>content...</tr>');
显然，你需要弄清楚如何获取每行的内容，但希望你能看到，用自定义数据填充每行并不难。
虽然您可以使用jQuery，但存在更简单的方法。jQuery将要求您添加不必要的额外步骤。如果您希望使用尽可能少的Javascript包，请使用jQuery。
但是，我强烈推荐Vue.js用于Laravel项目。laracast提供了如何设置它的说明。但是，我已经用v-for指令创建了一个带有Vue.js工作集的jsfiddle。查看JSFiddle