0

我有这个对象列表

[
{name: "Dan", age: 25, desc: "description"}, 
{name: "Mary", age: 15, desc: "description"},
{name: "Tom", age: 18, desc: "description"}
]

我想像这样打印它们，将它们分成两列并在它们下面描述。单击每个名称会在列表下方显示一些描述。

Dan 25       Tom 18 
Mary 15
**descripton pop up**

我试过这个

var test = [    
{name: "Dan", age: 25, desc: "description"}, 
{name: "Mary", age: 15, desc: "description"}, 
{name: "Tom", age: 18, desc: "description"}
]
document.write(test[0].name, test[0].age + "<br>",
 test[1].name, test[1].age+ "<br>",
 test[2].name, test[2].age+ "<br>");

但是我需要按字母顺序对它们进行排序，并且当用户使用 JavaScript 或 jQuery 单击名称时，我真的不知道如何在它们下面打印描述值。

你们能帮帮我吗！我被她困住了，这一切都是新的！

4

3 回答 3

0

输出：

var output = "<table><thead><tr><th>Name</th><th>Age</th><th>Desc</th></tr></thead><tbody>";
for (var i = 0; i < persons.length; i++) {
  output += "<tr><td>" + persons[i].name + "</td><td>" + persons[i].age + "</td><td>" + persons[i].desc + "</td></tr>";
}
output += "</tbody></table>";

对于描述：

"<td onclick='alert(\"" + persons[i].desc + "\")'>" + persons[i].name + "</td>"

小提琴

于 2013-06-24T19:21:40.743 回答
0

这有几个部分。

显示列表：你可以定义一个函数来写出列表，如下所示：

function displayPerson(person) {

  var $person = $('#persons').append('<div class="person">'+person.name+' '+person.age+'</div>')
  $person.data('description', person.desc);
  $person.on('click',function(e){
    $('#description').html($(this).data('description'))
  })
}

然后，您可以使用任何列表排序的所有功能，但是您想要

var test = [    
  {name: "Dan", age: 25, desc: "description"}, 
  {name: "Mary", age: 15, desc: "description"}, 
  {name: "Tom", age: 18, desc: "description"}
]

(function(){
  test = test.sort(function(a,b) {
    return a.name > b.name;
  });

  for(var i = 0; i < test.length; i++) {
    displayPerson(test[i]);
  }
});

然后就像这样有一个通用的html结构

<div id='persons'></div>
<div id='description'></div>

那应该产生点击事件所需的html来显示描述

http://jsfiddle.net/YDvkA/

于 2013-06-24T19:22:05.130 回答
0

演示：http: //jsfiddle.net/KKYZj/5/

JS：

$（函数（）{

    for(var i=0;i<data.length;i++)
    {
        if(i%2==0)
        {
            $('.main').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " " + data[i].age + "</a></br>");
        }
        else
        {
            $('.sidebar').append("<a onclick='javascript:details(\"" + data[i].name + "\")'>" + data[i].name + " " + data[i].age + "</a></br>");
        }
    }
});

HTML：

<head>
    <script type="text/javascript">
        var data = [
            {name: "Dan", age: 25, desc: "test"}, 
            {name: "Mary", age: 15, desc: "description"},
            {name: "Tom", age: 18, desc: "haaha"}
        ];

        function findName(personName){
            return $.grep(data, function(item){
              return item.name == personName;
            });
        }

        function details(personName)
        {
            var person = findName(personName.toString())[0];
            $('#description').html(person.desc);
        }
    </script>
</head>
<body>
    <div>
        <div class='main'>
        </div>
        <div class='sidebar'>
        </div>
        <div id="description">
        </div>
    </div>
</body>

CSS（概念证明）：

.main {
float:left;
width:250px;
background:#9c9;
}
.sidebar {
float:right;
width:250px;
background:#c9c;
}
于 2013-06-24T19:43:01.393 回答