-1

ページの下部に生成されるテーブルがあります。そのテーブル（2番目の列）の内容を取得して、ページ上部の選択ボックスに入れたいと思います。理想的にはアルファベット順です。

私はここでアイデアが不足していますが、これは私が現在持っているコードです。

<div id="content">
    <p>Lots of content goes here...</p>
    <p>Lots of content goes here...</p>
    <p>Lots of content goes here...</p>
    <p>Lots of content goes here...</p>
    <p>Lots of content goes here...</p>
    <table id="fav-table">
        <tbody>
            <tr>
                <th>Number</th>
                <th>Name</th>
            </tr>
            <tr>
                <td>1</td>
                <td><a href="http://www.example/com/durham">Durham</a></td>
            </tr>    
            <tr>
                <td>2</td>
                <td><a href="http://www.example/com/leicester">Leicester</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td><a href="http://www.example/com/london">London</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td><a href="http://www.example/com/manchester">Manchester</a></td>
            </tr>
            <tr>
                <td>5</td><td><a href="http://www.example/com/worcester">Worcester</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td><a href="http://www.example/com/newcastle">Newcastle</a></td>
            </tr>
        </tbody>
    </table>
</div>

jqueryで

    jQuery('#content').prepend(jQuery('#fav-table').html());

このjqueryを手動で追加すると、機能します。

jQuery('#content').prepend('<select><option value="http://www.example/com/durham">Durham</option><option value="http://www.example/com/leicester">Leicester</option><option value="http://www.example/com/london">London</option><option value="http://www.example/com/manchester">Manchester</option><option value="http://www.example/com/newcastle">Newcastle</option><option value="http://www.example/com/worcester">Worcester</option></select>');

ただし、テーブルのデータが変更される可能性があるため、jqueryをテーブルの2番目の列に基づいて作成する必要があります。どうすればこれを行うことができますか？

このjsfiddleにもコードを入れました。

4

3 に答える 3

1

選択のhtml文字列を作成して追加することにより、あなたが行っているように、selectオブジェクトを追加optionsする前にオブジェクトを作成する必要があります。divjQuery を使用sortしてアンカー テキストを並べ替え、eachオプションを作成するために繰り返し処理することができます。

ライブデモ

sel = $('<select>');
jQuery('#fav-table a').sort(function(a, b){
    return $(a).text() > $(b).text();
}).each(function () {
  sel.append("<option value=\"" + this.href + "\">" + $(this).text() + "</option>");
});
jQuery('#content').prepend(sel);
于 2013-01-26T07:31:14.890 に答える
1

これを試してみてください。必要に応じて変更してください:) 

var values=[], options=[];

//Iterate  td's in second column
$('#fav-table>tbody>tr>td:nth-child(2)').each( function(){
//add item to array
values.push( $(this).text() );         
});

//restrict array to unique items so that select have only unique values in dropdown
var values = $.unique( values );

var values = values.sort();// sort the array

//iterate unique array and build array of select options
$.each( values, function(i, value){
options.push('<option value="' + value + '">' + value + '</option>'); 
})

//finally empty the select and append the items from the array
$('#selectId').empty().append( options.join() );
于 2013-01-26T07:23:03.463 に答える
1

更新しました ： 

 $('body').append('<select id="select">');
     var mylist = $('#select');
    $('#fav-table tr td:nth-child(2) a').each(function(){
    var text = $(this).text();
        mylist.append('<option value=' + $(this).attr('href') + '>'+text+'</option>')
    }
    )


     var listitems = mylist.children('option').get();
     listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
     })
     $.each(listitems, function(idx, itm) { mylist.append(itm); });

注文コードは他の質問の ライブデモから取得しました

于 2013-01-26T07:24:18.940 に答える