-1

我有一个在页面底部生成的表格。我想获取该表的内容（第二列）并将其放在页面顶部的选择框中。最好按字母顺序。

我在这里缺乏想法，但这是我目前拥有的代码。

<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 基于表的第二列。我该怎么做呢？

我也将代码放在了这个 jsfiddle中。

4

3 回答 3

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 回答
1

您必须先创建一个select添加到它的对象options，然后再添加到您的对象中div，方法是创建 select 的 html 字符串并添加它。您可以使用 jQuerysort对锚文本进行排序，然后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 回答