js动态生成表格

1. js动态生成表格

var row, cell;
table = document.createElement("table");
table.setAttribute("border", 1);
for (var i = 0; i < 3; i++) {
    row = document.createElement("tr");
    table.appendChild(row);
    for (var j = 0; j < 3; j++) {
        cell = document.createElement("td");
        cell.style.padding = "10px";
        cell.innerHTML = '第'+i+'行第'+j+'列';
        row.appendChild(cell);
    }
}
document.body.appendChild(table);

效果图

2. 将table里面tr顺序颠倒

获取到的行没有reverse这个方法，因此我们有两种方式将获得的所有行进行转换。

var table = document.getElementById("table");
console.log(table.tBodies[0]); //获得table下的整个tbody的结构

//方法一：将所有行push到另外一个数组中
function tr_reverse1() {
    trs = [];
    orgs = table.tBodies[0].rows; // 通过table.tBodies[0].rows获取到当前tbody中的所有行
    for(i=0; i<orgs.length; i++)
        trs.push(orgs[i]);
    trs.reverse();
    //很关键：table append的时候会自动替换‘已存在’的tr
    for(i=0; i<trs.length; i++){
        table.tBodies[0].appendChild(trs[i]);
    }
}

//方法二：用Array.prototype.slice.call()将所有行变成数组
function tr_reverse2() {
    orgs = table.tBodies[0].rows;
    trs = Array.prototype.slice.call(orgs, 0);
    trs.reverse();
    for(i=0; i<trs.length; i++){
        table.tBodies[0].appendChild(trs[i]);
    }
}

tr_reverse1();

效果图