1. 程式人生 > >js中動態生成表格

js中動態生成表格

  <script type="text/javascript">

function demo() {

// 獲取輸入框內輸入的行和列的數值

var rowValue = parseInt(document.getElementById("row").value);

var colValue = parseInt(document.getElementById("col").value);

// 建立一個表格物件

var tableObj = document.createElement("table");

// 遍歷建立行

for (var row = 0; row < rowValue; row++) {

//建立行標籤物件

var trObj = document.createElement("tr");

// 把行標籤物件新增到表格物件中

tableObj.appendChild(trObj);

// 迴圈建立列物件

for (var col = 0; col < colValue; col++) {

// 建立td標籤物件

var tdObj = document.createElement("td");

// 給td標籤物件新增內容

tdObj.innerHTML = row + "-" + col;

//把建立td物件新增到行中

trObj.appendChild(tdObj);

}

}

// 把建立的表格物件新增到body中

document.body.appendChild(tableObj);

}

    </script>