使用Javascript创build表格
我有一个JavaScript函数创build一个3行2单元格的表。
有谁可以告诉我如何使用我的function创build下表（我需要为我的情况做到这一点）？
我的HTML：
<table width="100%" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> <tr> <td> </td> </tr> </table> JavaScript的：
function tableCreate() { //body reference var body = document.getElementsByTagName("body")[0]; // create elements <table> and a <tbody> var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); // cells creation for (var j = 0; j <= 2; j++) { // table row creation var row = document.createElement("tr"); for (var i = 0; i < 2; i++) { // create element <td> and text node //Make text node the contents of <td> element // put <td> at end of the table row var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.appendChild(cellText); row.appendChild(cell); } //row added to end of table body tblBody.appendChild(row); } // append the <tbody> inside the <table> tbl.appendChild(tblBody); // put <table> in the <body> body.appendChild(tbl); // tbl border attribute to tbl.setAttribute("border", "2"); }
这应该工作（从上面的一些改变到你的代码）。
function tableCreate() { var body = document.getElementsByTagName('body')[0]; var tbl = document.createElement('table'); tbl.style.width = '100%'; tbl.setAttribute('border', '1'); var tbdy = document.createElement('tbody'); for (var i = 0; i < 3; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 2; j++) { if (i == 2 && j == 1) { break } else { var td = document.createElement('td'); td.appendChild(document.createTextNode('\u0020')) i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null; tr.appendChild(td) } } tbdy.appendChild(tr); } tbl.appendChild(tbdy); body.appendChild(tbl) }
使用insertRow和insertCell略微缩短代码：
function tableCreate(){ var body = document.body, tbl = document.createElement('table'); tbl.style.width = '100px'; tbl.style.border = '1px solid black'; for(var i = 0; i < 3; i++){ var tr = tbl.insertRow(); for(var j = 0; j < 2; j++){ if(i == 2 && j == 1){ break; } else { var td = tr.insertCell(); td.appendChild(document.createTextNode('Cell')); td.style.border = '1px solid black'; if(i == 1 && j == 1){ td.setAttribute('rowSpan', '2'); } } } } body.appendChild(tbl); } tableCreate();
function addTable() { var myTableDiv = document.getElementById("myDynamicTable"); var table = document.createElement('TABLE'); table.border = '1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < 3; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < 4; j++) { var td = document.createElement('TD'); td.width = '75'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } myTableDiv.appendChild(table); }
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <table id="myTable" cellpadding="2" cellspacing="2" border="1" onclick="tester()"></table> <script> var student; for (var j = 0; j < 10; j++) { student = { name: "Name" + j, rank: "Rank" + j, stuclass: "Class" + j, }; var table = document.getElementById("myTable"); var row = table.insertRow(j); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = student.name, cell2.innerHTML = student.rank, cell3.innerHTML = student.stuclass; } </script> </body> </html>
<!DOCTYPE html> <html> <body> <p id="p1"> <b>Enter the no of row and column to create table:</b> <br/><br/> <table> <tr> <th>No. of Row(s) </th> <th>No. of Column(s)</th> </tr> <tr> <td><input type="text" id="row" value="4" /> X</td> <td><input type="text" id="col" value="7" />Y</td> </tr> </table> <br/> <button id="create" onclick="create()">create table</button> </p> <br/><br/> <input type="button" value="Reload page" onclick="reloadPage()"> <script> function create() { var row = parseInt(document.getElementById("row").value); var col = parseInt(document.getElementById("col").value); var tablestart="<table id=myTable border=1>"; var tableend = "</table>"; var trstart = "<tr bgcolor=#ff9966>"; var trend = "</tr>"; var tdstart = "<td>"; var tdend = "</td>"; var data="data in cell"; var str1=tablestart + trstart + tdstart + data + tdend + trend + tableend; document.write(tablestart); for (var r=0;r<row;r++) { document.write(trstart); for(var c=0; c<col; c++) { document.write(tdstart+"Row."+r+" Col."+c+tdend); } } document.write(tableend); document.write("<br/>"); var s="<button id="+"delete"+" onclick="+"deleteTable()"+">Delete top Row </button>"; document.write(s); var relod="<button id="+"relod"+" onclick="+"reloadPage()"+">Reload Page </button>"; document.write(relod); } function deleteTable() { var dr=0; if(confirm("It will be deleted..!!")) { document.getElementById("myTable").deleteRow(dr); } } function reloadPage(){ location.reload(); } </script> </body> </html>
我希望你觉得这有帮助。
HTML：
<html> <head> <link rel = "stylesheet" href = "test.css"> <body> </body> <script src = "test.js"></script> </head> </html>
JAVASCRIPT：
var tableString = "<table>", body = document.getElementsByTagName('body')[0], div = document.createElement('div'); for (row = 1; row < 101; row += 1) { tableString += "<tr>"; for (col = 1; col < 11; col += 1) { tableString += "<td>" + "row [" + row + "]" + "col [" + col + "]" + "</td>"; } tableString += "</tr>"; } tableString += "</table>"; div.innerHTML = tableString; body.appendChild(div);
var btn = document.createElement('button'); btn.innerHTML = "Create Table"; document.body.appendChild(btn); btn.addEventListener("click", createTable, true); function createTable(){ var div = document.createElement('div'); div.setAttribute("id", "tbl"); document.body.appendChild(div) document.getElementById("tbl").innerHTML = "<table border = '1'>" + '<tr>' + '<th>Heading</th>' + '<th>Heading</th> ' + '<th>Heading</th>' + '</tr>' + '<tr>' + '<td>cell</td>' + '<td>cell</td>' + '<td>cell</td>' + '</tr>' + '<tr>' + '<td>cell</td>' + '<td>cell</td>' + '<td>cell</td>' + '</tr>' + '<tr>' + '<td>cell</td>' + '<td>cell</td>' + '<td>cell</td>' + '</tr>' };
