jQueryの私は、クリックイベントを書き、使用してテーブルを作成する必要が列と行

Question

変更について：

NAME1：VALUE1

名2：値2

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

結果は同様であるが

しかし、私はに変更したい：

名1名2

値1の値2

どうすればよいですか？

Answer 1

あなたが後でそれらのそれぞれのための単一の文字列を構築するために使用namesとvaluesための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); 
}); 
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); 

Answer 2

をあなたのテーブルの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);