javascript 变量数组对象问题 路过的朋友看看 谢谢
1
悬赏园豆：10
[已解决问题]
解决于 2015-12-28 09:12
详情code： ps：可以复制新建html页面直接运行
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>博客园 - 开发者的网上家园</title> <script src="http://common.cnblogs.com/script/jquery.js"type="text/javascript"></script></head> <body> <table border="1" id="tbID"> <thead> <tr> <th>id</th> <th>name</th> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript"> //数据源模拟 var arr = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}]; var tdID = $("#tbID tbody"); if (tdID.text() > 0) { tdID.remove(); } //创建td td是动态创建的 问题来了 如何 var arrTr = []; var arrTrHead = $("#tbID thead th").length; for (var i = 0; i < arr.length; i++) { arrTr.push("<tr>"); for (var j = 0; j < arrTrHead; j++) { arrTr.push("<td>" + 1 + "</td>");//如何用下面方式（1）取值 这样我就写一个td 写2个循环数据就不对了 我不知道插件 是怎么解决类似这样的问题的？ } arrTr.push("</tr>"); } tdID.append(arrTr.join("")); //遍历数组对象 用key的方式输出 不用对象.的方式取值（1） var arr1 = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}]; for (var i in arr1) { for (var s in arr1[i]) { alert(arr1[i][s]); } } </script> </body> </html>
想法:要求创建表格的时候 td是动态的 不是写死 写死了 就不存在这样的问题 可以直接循环"点属性取出值"
最佳答案
0
加了两行代码，改了一行代码，具体位置都有注释，应该是达到楼主想要的结果了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>博客园 - 开发者的网上家园</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script></head>
<body>
<table border="1" id="tbID">
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var arr = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}];
//这两行代码是我新加的
var arrKeys = [];
for(var key in arr[1]) arrKeys.push(key);
var tdID = $("#tbID tbody");
if (tdID.text() > 0) {
tdID.remove();
}
var arrTr = [];
var arrTrHead = $("#tbID thead th").length;
for (var i = 0; i < arr.length; i++) {
arrTr.push("<tr>");
for (var j = 0; j < arrTrHead; j++) {
//这一行代码是我改的
arrTr.push("<td>" + arr[i][arrKeys[j]] + "</td>");
}
arrTr.push("</tr>");
}
tdID.append(arrTr.join(""));
</script>
</body>
</html>
收获园豆：5
其他回答(4)
0
var arr = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}]; var tdID = $("#tbID tbody"); if (tdID.text() > 0) { tdID.remove(); } var arrTr = []; var arrTrHead = $("#tbID thead th").length; for (var i = 0; i < arr.length; i++) { arrTr.push("<tr>"); var arrTemp = f1(); arrTr.push("<td>" + arrTemp.id + "</td>"); arrTr.push("<td>" + arrTemp.name + "</td>"); arrTr.push("</tr>"); } tdID.append(arrTr.join("")); function foo(){ var i = -1; return function boo(){ i++; while (i < arr.length) { return arr[i]; } } } var f1 = foo();
迴圈跑Array，取屬性建td
收获园豆：2
写多个td 不如直接这样 效率还高
var arr = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}]; var tdID = $("#tbID tbody"); if (tdID.text() > 0) { tdID.remove(); } var arrTr = []; var arrTrHead = $("#tbID thead th").length; for (var i = 0; i < arr.length; i++) { arrTr.push("<tr>"); arrTr.push("<td>" + arr[i].id + "</td>"); arrTr.push("<td>" + arr[i].name + "</td>"); arrTr.push("</tr>"); } tdID.append(arrTr.join(""));
我的例子是一个td的 朋友
而且我希望是遍历的方式 不要arr[i].id 这样点id 你这样的写的方法不通用 你用插件的时候 表格 人家会。id和name吗？人家写的怎么知道你的名称 应该要用遍历属性的方式 取值
@s_p:
閉包都寫給你了，自己再想想吧..
你要整個打平在遍例也行阿，陣列跟物件的屬性全部打平成一個集合，單迴圈遍例又不是做不到
@RosonJ: 我还是用这个算了
<!DOCTYPE html>
<html lang="zh-cn" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>博客园 - 开发者的网上家园</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<table border="1" id="tbID" >
<thead>
<tr>
<th>
id
</th>
<th>
name
</th>
</tr>
</thead>
<tbody ng-repeat="a in data">
<tr>
<td>
{{a.id}}
</td>
<td>
{{$index+1+a.name}}
</td>
</tr>
</tbody>
</table>
<input type="button" value="sss" ng-click="remove()"; />
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
var arr = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}];
$scope.data = arr;
$scope.remove = function () {
//var item = arr.splice(1, 1); ;
//$scope.data = arr;
$scope.data = [{ "id": 5, "name": "张三" }, { "id": 6, "name": "李四" }, { "id": 7, "name": "王五"}];
};
});
</script>
</body>
</html>
0
每一列可以有点击事件，直接用this对象就ok,去所有的可以去取他的兄弟节点
看不懂你的意思 貌似和事件 兄弟节点没关系吧？
@s_p: 看你1楼和你的对话，我还是没怎么明白，但好像泛型与反射对你有帮助
0
要是你能封装一下，把数据和DOM操作分离一下，可能不会这么纠结了。
这是我之前闲来没事，写的一个翻页插件，当然跟你说的一样，列和行都是动态的,so!看下代码吧：
收获园豆：3
0
<script type="text/javascript">
var persons = [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }, { "id": 3, "name": "王五"}];
var table_body = jQuery("#tbID tbody");
var set_row = function(id,name){
var template = "<tr><td>{$id}</td><td>{$name}</td></tr>";
return template.replace("{$id}",id).replace("{$name}",name);
}
persons.forEach(function(person){
table_body.append(set_row(person.id,person.name));
});
</script>
不知道题主是出于性能考虑还是什么采用逐个添加标签的方式，JS添加HTML一般还是用模板会显得更加清晰的。