使用 Javascript 创建表格

IT技术 javascript html-table
2021-02-01 23:51:56

我有一个 JavaScript 函数，它创建一个包含 3 行 2 个单元格的表格。

谁能告诉我如何使用我的函数创建下表（我需要根据我的情况执行此操作）？

下面是我的 javascript 和 html 代码：

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

6个回答

使用insertRowand 的代码略短insertCell：

function tableCreate() {
  const body = document.body,
        tbl = document.createElement('table');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border = '1px solid black';
        if (i === 1 && j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();

此外，这不会使用一些“不良做法”，例如设置border属性而不是使用 CSS，并且它访问的是bodythroughdocument.body而不是document.getElementsByTagName('body')[0];

这应该可以工作（从对上面的代码进行一些更改）。

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

@bdogru：为什么需要支持 IE8？这是古老的。谷歌在 2012 年底放弃了该浏览器
2021-03-18 23:51:56
@Cerbrus 这是一个很好的解决方案，但它在 IE8 之前不起作用。表已添加到 DOM 资源管理器，但不知何故，它不可见。有谁知道如何解决这个问题？
2021-03-24 23:51:56
@bdogru：那我建议你问一个单独的问题。
2021-04-01 23:51:56
@Cerbrus 我最终通过将最后一行更改为：body.innerHTML = tbl.outerHTML 解决了这个问题，看起来 appendChild 更新了 dom 结构，但不重新渲染 html 视图（现代浏览器会），但 innerHTML 直接影响 html 视图。
2021-04-01 23:51:56
很好的解决方案，但最好在循环之外创建变量
2021-04-07 23:51:56 

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);
}
addTable();
<div id="myDynamicTable"></div>

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

这是.map在 javascript 中使用该函数的最新方法。

简单的表代码..

    <table class="table table-hover">
        <thead class="thead-dark">
            <tr>
             <th scope="col">Tour</th>
             <th scope="col">Day</th>
             <th scope="col">Time</th>
             <th scope="col">Highlights</th>
             <th scope="col">Action</th>
           </tr>
        </thead>
      <tbody id="tableBody">
                                
 </tbody>
</table>

这是用于在表正文中附加某些内容的 javascript 代码。

    const data = "some kind of json data or object of arrays"; // [{"Name:"Ali", "Day":"Monday"}]
                const tableData = data.map(function(value){
                    return (
                        `<tr>
                            <td>${value.Name}</td>
                            <td>${value.Day}</td>
                            <td>${value.Time}</td>
                            <td>${value.Highlights}</td>
                            <td class="text-center"><a class="btn btn-primary" href="route.html?id=${value.ID}" role="button">Details</a></td>
                        </tr>`
                    );
                }).join('');
            const tabelBody = document.querySelector("#tableBody");
                tableBody.innerHTML = tableData;
其它你可能感兴趣的问题
上一篇如何使用 JavaScript 转义包含换行符的 JSON 字符串？ 下一篇单选按钮 (INPUT type="radio") 的 OnChange 事件处理程序不能作为一个值工作