Fiddle

Question

我有这个对象列表

[
{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时，我真的不知道如何在它们下面打印描述值。

你们能帮助我吗！所有这一切都让我陷入了困境！

Answer 1

输出：

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>"

Fiddle

Answer 2

这有几个部分。

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

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/

Answer 3

DEMO：http://jsfiddle.net/KKYZj/5/

JS：

$（function（）{

    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;
}

输出Javascript或jQuery中的对象列表

3 个答案:

Fiddle