从数组动态构建表
Dynamicaly building table from array
我一直在尝试让这段代码工作几个小时,似乎无法弄清楚我做错了什么或我可能搞砸了什么,我从一个有效的示例页面复制了这段代码并对其进行了修改以制作我想要构建的表格。
原始剪辑代码:
$(function () {
var $wrap = $('<div>').attr('id', 'tableWrap');
var $tbl = $('<table>').attr('id', 'basicTable');
for (var i = 0; i < 200; i++) {
$tbl.append($('<tr>').append($('<td>').text(i),$('<td>').text(200 - i)));
}
$wrap.append($tbl);
$('body').append($wrap);
});
现在我将其更改为六行,并从javascript数组加载链接和数据,由于某种原因,它不会构建表。
我的代码:
myArray = new Array();
myArray[0] = new Array("001","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[1] = new Array("002","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[2] = new Array("003","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[3] = new Array("004","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[4] = new Array("005","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[5] = new Array("006","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[6] = new Array("007","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[7] = new Array("008","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[8] = new Array("009","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
myArray[9] = new Array("010","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
var $wrap = $('<div>').attr('id', 'tableWrap');
var $tbl = $('<table>').attr('id', 'basicTable');
for(i=0;i<myArray.length;i++){
$(function () {
$tbl.append($('<tr>').append(
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>')));
}
$wrap.append($tbl);
$('#c').append($wrap);
});
在身体里我有一个..
<div id="c"></div>
我正在尝试将其加载到...我想坚持使用jQuery,但几乎想只使用JavaScript document.write函数
----更新 05/14/2012 ----
多亏了许多人的帮助,现在它已经归结为只使用 JavaScript。让它工作并按照我需要的方式工作,直到我度假回来。我仍然想将其压缩/转换为jquery,因此它看起来更干净并且已经将其用于其他事情。因此,对于任何遇到这篇文章并且正在寻找这个方向的东西的人来说,这是我扔在一起的 jsFiddle,以帮助展示我是如何在每个人的帮助下设置它的......再次感谢大家!!
$(function () {
var $wrap = $('<div/>').attr('id', 'tableWrap');
var $tbl = $('<table/>').attr('id', 'basicTable');
for(i=0;i<myArray.length;i++){
// $(function () { is miss placed
$tbl.append($('<tr/>').append(
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
$('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>')));
}
$wrap.append($tbl);
$('#c').append($wrap);
});
问题
- 错过
$(function) {..
的地方 -
alt="'+myArray[i][1]'"
应该alt="'+myArray[i][1]+'"
演示
首先,您忘记在语句后关闭table
元素for
第二,为什么要在for
之后$(function() {
?错了。如果要使用它,则必须用});
关闭它
var $wrap = $('<div>').attr('id', 'tableWrap');
var $tbl = $('<table>').attr('id', 'basicTable');
for(i=0;i<myArray.length;i++){
$tbl.append($('<tr>').append(
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
$('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>')));
}
$tbl.append("</table">);
相关文章:
- 有没有一种方法可以基于Angular 2中注册的路线构建动态导航/菜单
- 如何使用CSS和JavaScript构建动态菜单
- 使用jquery解析json以构建动态填充的select
- 在 AngularJS 配置中构建动态模板 URL
- 在 JavaScript 中构建动态表
- jQuery - 基于作为函数参数传递的对象构建动态 if 语句
- JavaScript 框架,用于构建动态但服务器端驱动的前端
- 如何在 Flask 中构建动态 JavaScript 创建
- 使用 get_categories() 构建动态类别树
- 从 JSON 构建动态表
- 是否可以在Javascript中构建动态自定义对象
- 如何构建动态html表单远程CSV
- 如何使用javascript构建动态函数
- 用javascript构建动态下拉列表
- Javascript构建动态字符串
- 使用javascript/ajax构建动态数组
- Bootstrap Modal:构建动态内容
- jQuery或angularjs插件来构建动态报告
- 使用jquery构建动态html,或者它一定比这更容易
- 用Javascript构建动态链接