你不知道的创建表格

//需求:创建一个2行3列的表格

  1.传统的做法

           function ct ( tag ) {

return document.createElement( tag );
}


var table = ct( 'table' );

var tbody = ct( 'tbody' );
table.appendChild( tbody );

// 开始创建行与列, 凡是涉及到行与列的循环就是两个循环嵌套
for ( var i = 0; i < 2; i++ ) {
// 创建行
var tr = ct( 'tr' );
for ( var j = 0; j < 3; j++ ) {
// 创建单元格
var td = ct( 'td' );
// 加数据
td.appendChild( document.createTextNode( ' ' ));
// innerHTML = '&nbsp;';
td.style.height = '100px';
// 将 td 加入到 行中
tr.appendChild( td );
}
// 将一行加入到 tbody 中
tbody.appendChild( tr );
}
table.border = 1;
table.width = 600;
document.body.appendChild( table );



// 2, 使用 parseHTML 的做法
// 第一种处理办法就是拼接字符串


var data = [
{ name: 'jim1', age: 19, gender: '男' },
{ name: 'jim2', age: 12, gender: '女' },
{ name: 'jim3', age: 13, gender: '男' },
{ name: 'jim4', age: 14, gender: '女' },
{ name: 'jim5', age: 15, gender: '男' }
];


var trs = data.map(function ( v, i ) {
// 遍历 v 中的每一个值, 拼接得到 td 的字符串
var tmpArr = [];
for ( var k in v ) {
tmpArr.push( v[ k ] ); // 就是将 每一行的 name, age, gender 的值存储到数组中
}

return '<tr><td>' + tmpArr.join( '</td><td>' ) + '</td></tr>';
});

var tbody = '<tbody>' + trs.join( '' ) + '</tbody>';

var table = parseHTML( '<table border="1">' + tbody + '</table>' );


document.body.appendChild( table[ 0 ] );

document.body.appendChild( ct( 'hr' ) );



 第二种处理办法就是 使用 parseHTML 当做createElement 方法用


var table = parseHTML( '<table border="1"></table>' )[ 0 ];

var tbody = parseHTML( '<tbody></tbody>' )[ 0 ];

data.forEach(function ( v ) {

var tr = parseHTML( '<tr></tr>' )[ 0 ];

for ( var k in v ) {

var td = parseHTML( '<td style="height: 50px; 100px" >' + v[ k ] + '</td>' )[ 0 ];

tr.appendChild( td );
}

tbody.appendChild( tr );
});

table.appendChild( tbody );

document.body.appendChild( table );

 

需要引入common.js文件

              function parseHTML ( str ) {

var node = document.createElement( 'div' );
node.innerHTML = str;
var arr = [];
arr.push.apply( arr, node.childNodes );
return arr;

}