0

このオブジェクトのリストがあります

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

このように印刷したいと思います。2つの列に分割し、その下に記述します。各名前をクリックすると、リストの下に説明が表示されます。

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 に答える