jQuery об изменении столбца и строки

У меня есть написать событие click, и создать таблицу с помощью:

var table = $('<table></table>').addClass('foo');
                $.each($(this).get(0).attributes,function(i,attrib){
                    //var row = $('<tr></tr>').addClass('bar').text(attrib.name + ":" + attrib.value);
                    table.append('<tr><td>'+attrib.name+'</td><td>'+attrib.value+'</td></tr>');
                   // table.append(row);

                });
                $('#here_table').append(table);

Результат похож:

name1 : value1

name2 : value2

Но я хочу изменить в:

name1 name2

value1 value2

Что мне делать?

2 ответа

  1. Для каждого из них можно создать два отдельных массиваnames, valuesкоторые впоследствии будут использоваться для построения одной строки:

    var table = $('<table></table>').addClass('foo');
    var names = [];
    var values = [];
    $.each($(this).get(0).attributes, function(i, attrib) {
        names.push(attrib.name);
        values.push(attrib.value);
    });
    var rowNames = $('<tr></tr>').addClass('bar').text(names.join(" "));
    table.append(rowNames);
    var rowValues = $('<tr></tr>').addClass('bar').text(values.join(" "));
    table.append(rowValues);
    $('#table').append(table);
    
  2. Сначала необходимо собрать имена и значения, а затем поместить их в две строки таблицы. К сожалению, вы не можете легко заполнить столбец таблицы по столбцам

    Что-то в линиях

    var table = $('<table></table>').addClass('foo');
    var names = [];
    var values = [];
    $.each($(this).get(0).attributes, function(i, attrib) {
       names.push(attrib.name);
       values.push(attrib.value);
    }
    
    // now populate two lines
    var row1 = $('<tr/>');
    $.each(names, function(i, name) {
       var td = $('<td/>');
       td.text(name);
       row1.append(td);
    }
    table.append(row1);
    
    var row2 = $('<tr/>');
    $.each(values, function(i, value) {
       var td = $('<td/>');
       td.text(value);
       row2.append(td);
    }
    table.append(row2);