首页新闻找找看学习计划

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是动态的 不是写死 写死了 就不存在这样的问题 可以直接循环"点属性取出值"  

s_p的主页 s_p | 菜鸟二级 | 园豆:269
提问于:2015-10-07 15:03
< >
分享
最佳答案
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
脚本王子 | 小虾三级 |园豆:779 | 2015-12-25 21:14
其他回答(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
RosonJ | 园豆:2317 (老鸟四级) | 2015-10-07 16:53

写多个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的 朋友

支持(0) 反对(0) s_p | 园豆:269 (菜鸟二级) | 2015-10-07 17:15

而且我希望是遍历的方式 不要arr[i].id 这样点id  你这样的写的方法不通用 你用插件的时候 表格 人家会。id和name吗?人家写的怎么知道你的名称  应该要用遍历属性的方式 取值 

支持(0) 反对(0) s_p | 园豆:269 (菜鸟二级) | 2015-10-07 17:17

@s_p: 

閉包都寫給你了,自己再想想吧..

你要整個打平在遍例也行阿,陣列跟物件的屬性全部打平成一個集合,單迴圈遍例又不是做不到

支持(0) 反对(0) RosonJ | 园豆:2317 (老鸟四级) | 2015-10-07 17:37

@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) 反对(0) s_p | 园豆:269 (菜鸟二级) | 2015-10-07 18:03
0

每一列可以有点击事件,直接用this对象就ok,去所有的可以去取他的兄弟节点

稳稳的河 | 园豆:4183 (老鸟四级) | 2015-10-07 17:42

看不懂你的意思 貌似和事件 兄弟节点没关系吧? 

支持(0) 反对(0) s_p | 园豆:269 (菜鸟二级) | 2015-10-07 17:44

@s_p: 看你1楼和你的对话,我还是没怎么明白,但好像泛型与反射对你有帮助

支持(0) 反对(0) 稳稳的河 | 园豆:4183 (老鸟四级) | 2015-10-07 17:53
0

要是你能封装一下,把数据和DOM操作分离一下,可能不会这么纠结了。

这是我之前闲来没事,写的一个翻页插件,当然跟你说的一样,列和行都是动态的,so!看下代码吧:

http://www.cnblogs.com/goesby/p/4419045.html

收获园豆:3
一起走过的日子…… | 园豆:236 (菜鸟二级) | 2015-11-16 11:10
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一般还是用模板会显得更加清晰的。

winfa | 园豆:165 (初学一级) | 2015-12-03 22:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册