Question

我有这个功能

function renderListSelecoes(data) {
    // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one')
    var list = data == null ? [] : (data.selecoes instanceof Array ? data.selecoes : [data.selecoes]);

    $('#selecaoList <tr><td>').remove();
    $.each(list, function(index, selecao) {
        $('#selecaoList').append('<tr><td><a href="#" data-identity="' + selecao.id_selecao + '">'+selecao.nome+'</a></td></tr>');
    });
}

这会插入表格中的每一行，如下所示：

Brasil
Argentina
Colômbia
Uruguai
Suíça
Argélia
Costa do Marfim
Gana

如何将其转换为例如2columns，如下所示：

Brasil         Costa do Marfim
Argentina      Gana
Colômbia       Argélia
Uruguai        Suiça

这是我在html中的代码的一部分：

<div class="table-responsive container" >
        <table class="table">
            <tbody id="selecaoList">

            </tbody>
        </table>
    </div>

Answer 1

以下是如何做到这一点：

function renderListSelecoes(data) {
    // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one')
    var list = data == null ? [] : (data.selecoes instanceof Array ? data.selecoes : [data.selecoes]);

    $('#selecaoList').empty();
    var tr = $( '<tr/>' ),
        td = $( '<td/>' ),
        row;
    $.each(list, function(index, selecao) {
        if( index % 2 === 0 ) {
            row = tr.clone();
            row.html( td.clone().html( selecao.nome ) );
        } else {
            row.append( td.clone().html( selecao.nome ) );
            $('#selecaoList').append( row );
        }
    });
}

Answer 2

您可以执行以下操作：

var list=["Brasil","Argentina","Colômbia","Uruguai","Suíça","Argélia","Costa do Marfim", "Gana"];
if(list.length %2 ==1){
    list.push("");/* pad array if not even number*/
}
var middle= list.length/2;
var html=''
for(i=0; i < middle; i++){    
    html+='<tr><td>'+list[i]+'</td><td>'+list[middle+i] + '</td></tr>';   
}
$('table').html(html)

的 DEMO

将单列转换为多列

2 个答案: