使用Javascript创建表格

我有一个JavaScript函数，它创建一个3行2单元格的表格。
有人可以告诉我如何使用我的功能创建下表（我需要为我的情况做到这一点）？使用Javascript创建表格

我的HTML：

<table width="100%" border="1"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td rowspan="2">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</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"); 
    }

来源

2013-02-01 Manny Fitzgerald

这应该工作（从几调整一下上面的代码）。

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

来源

2013-02-01 09:55:36

好的解决办法，但最好到循环 –

@Cerbrus之外创建的变量，这是件好事解决方案，但它不能在IE8之前工作。表被添加到DOM资源管理器，但不知何故，它不可见。有人知道如何解决这个问题吗？ – bdogru

@bdogru：你为什么需要支持IE8？这是古老的。谷歌[2012年末[浏览器下载]]（http://www.computerworld.com/article/2492571/web-apps/google-to-drop-support-for-ie8-on-nov--15.html） – Cerbrus

使用 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();

而且，这不使用一些 “错误做法”，如设置border属性，而不是使用CSS，它访问body到document.body而不是document.getElementsByTagName('body')[0];

来源

2013-02-01 10:38:45 Cerbrus

第一行的错字（'instertRow'），我无法编辑。 – Cyrbil

谢谢，现在已经编辑过了:-) – Cerbrus

<!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>

来源

2013-06-29 10:38:18

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

来源

2014-07-03 17:36:10 user3802764

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

来源

2015-06-03 10:02:30

我希望对您有所帮助。

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

来源

2017-05-30 08:59:42

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) 
 
\t 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>' 
 
};

来源

2017-09-26 11:40:21

这个答案可能是正确的，但它并不明显。如果您也可以提供解释，那么其他人阅读您的答案会更有用，并帮助他们决定是否适用于他们的问题 – Mikkel

使用Javascript创建表格

回答

相关问题