Question

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

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

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

我已将代码放在this jsfiddle中。

Answer 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() );

Answer 2

更新：

 $('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); });

订单代码取自其他问题 live demo

Answer 3

您需要创建一个select对象添加options，然后通过创建选择并添加html字符串来添加div。您可以使用jQuery sort对锚文本进行排序，然后使用each进行迭代以创建选项。

<强> Live Demo

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

使用jquery将表的内容添加到选择框中

3 个答案: