Question

我有一个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>

Answer 1

使用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而不是{{} 1}};

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

我希望你觉得这很有用。

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

Answer 7

我写了一个版本，可以动态地解析对象列表以将表创建为字符串。我将其分为三个函数，分别用于编写标题列，正文行并将它们缝合在一起。我导出为在服务器上使用的字符串。我的代码使用template strings来保持美观。

如果您要添加样式（例如引导程序），可以通过向HEAD_PREFIX和HEAD_SUFFIX添加更多html来实现。

// helper functions
const TABLE_PREFIX = '<div><table class="tg">';
const TABLE_SUFFIX = '</table></div>';
const TABLE_HEAD_PREFIX = '<thead><tr>';
const TABLE_HEAD_SUFFIX = '</tr></thead>';
const TABLE_BODY_PREFIX = '<tbody><tr>';
const TABLE_BODY_SUFFIX = '</tr></tbody>';

function generateTableHead(cols) {
  return `
    ${TABLE_HEAD_PREFIX}
      <td>#</td>
    ${cols.map((col) => `<td>${col}</td>`).join('')}
    ${TABLE_HEAD_SUFFIX}`;
}

function generateTableBody(cols, data) {
  return `
    ${TABLE_BODY_PREFIX}
    ${data.map((object, index) => `
        <tr><td>${index}</td>
        ${cols.map((col) => `<td>${object[col]}</td>`).join('')}
      </tr>`).join('')}
    ${TABLE_BODY_SUFFIX}`;
}

/**
 * generate an html table from an array of objects with the same values
 *
 * @param {array<string>} cols array of object columns used in order of columns on table
 * @param {array<object>} data array of objects containing data in a single depth
 */
function generateTable(data, defaultCols = false) {
  let cols = defaultCols;
  if (!cols) cols = Object.keys(data[0]); // auto generate columns if not defined
  return `
    ${TABLE_PREFIX}
    ${generateTableHead(cols)}
    ${generateTableBody(cols, data)}
    ${TABLE_SUFFIX}`;
}

这是一个示例用法：

const mountains = [
  { height: 200, name: "Mt. Mountain" },
  { height: 323, name: "Old Broken Top"},
]
const htmlTableString = generateTable(mountains );

Answer 8

当您想要动态行和列时，此解决方案将是完美的。您可以接受行和列作为参数。

function tableCreate(row, col){
    let body = document.body;
    let tbl  = document.createElement('table');
    tbl.style.width  = '200px';
    tbl.style.border = '1px solid black';

    for(let i = 0; i < row; i++){
        let tr = tbl.insertRow();
        for(let j = 0; j < col; j++){
                let td = tr.insertCell();
                td.appendChild(document.createTextNode(`${i},${j}` ));
                td.style.border = '1px solid black';
            }     
    }
    body.appendChild(tbl);
}

tableCreate(4,4);

输出 -

Answer 9

function creatTable(row = 10, col = 6) {
  var table = "<table style ='margin-left: auto;margin-right: auto; border-collapse: collapse; width: 70%; ' >";
  document.write(table);

  for (var h = 1; h < parseInt(col); h++) {

    th = "<th style='border: 3px solid #ddd;padding: 8px; padding-top: 12px;padding-bottom: 12px;text-align: center;background-color: #f5cf78;color: white;'>" + "I\'m Header";
    document.write(th);

    th += "</th>";

  }

  for (var i = 1; i < parseInt(row); i++) {

    tr = "<tr style='background: ; :hover{background: #ffff99}'>";
    document.write(tr);

    tr += "</tr>";

    for (var j = 1; j < parseInt(col); j++) {

      td = "<td style='border: 3px solid #ddd; padding: 8px;'>" + "I\'m cell no." + i + "," + j;
      document.write(td);

      td += "</td>";

    }

    tr += "</tr>";
  }

  table = "</table>";

}

console.log(creatTable())

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript</title>
</head>

<body>

  <h1>JavaScript...</h1>
  <h2>Hello!</h2>
  <h3>This Table Created by JavaScript &copy;
    <font color=# ff0026>Geologist / Mohamed Yasser</font>
  </h3>




  <script src="main.js"></script>

</body>

</html>

Answer 10

您可能会觉得这很有帮助

<html>
 <head>
  <title>tABLE IN JS</title>
 </head>

 <body>
  <table border = "1">
     <tr>
        <th>Plug-in Name</th>
        <th>Filename</th>
        <th>Description</th>
     </tr>
     
     <script language = "JavaScript" type = "text/javascript">
        for (i = 0; i<3; i++) {
           document.write("<tr><td>");
           document.write("Hello world");
           document.write("</td><td>");
           document.write("Hello China");
           document.write("</td><td>");
           document.write("Hello USA");
           document.write("</td></tr>");
        }
     </script>
  </table>      
 </body>
</html>

因此，您根据所需的列数创建表头，而行将取决于您在迭代中指定的数量..... 即这将是 3。< /p>

Answer 11

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

简单的表代码。

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

这是在表主体中附加内容的javascript代码。

    const data = "some kind of json data or object of arrays";
                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;

Answer 12

这里是使用raphael.js绘制表格的示例。

Automatically link new work in this build

请检查预览图像：https://i.stack.imgur.com/RAFhH.png

Answer 13

<style>
    body{
        background: radial-gradient(rgba(179,255,0.5),rgba(255,255,255,0.5),rgba(0,0,0,0.2));
        text-align: center;
    }
    #name{
        margin-top: 50px;
    }
    .input{
        font-size: 25px;
        color: #004d00;
        font-weight: 700;
        font-family: cursive;
    }
    #entry{
        width: 150px;
        height: 40px;
        font-size: 23px;
        font-family:  cursive;
        background-color: #001a66;
        color: whitesmoke;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);
        margin: 20px;
    }
    table{
        border-collapse: collapse;
        width: 50%;
        margin: 50px auto;
        background-color: burlywood;
    }
    table,th,td{
       border: 2px solid black;
       padding:5px;

    }
    th{
        font-size: 30px;
        font-weight: 700;
        font-family: Arial;
        color: #004d00;
    }
    td{
        font-size: 25px;
        color: crimson;
        font-weight: 400;
        font-family: Georgia;
    }
    .length{
        width: 20%;
    }
</style>
<body>
    <!-- Code to get student details -->
    <div id="container" >
        <div class="input">
             Name: <input type="text" id="name" class="length" placeholder="eg: Anil Ambani"/>
        </div>
        <div class="input">
             Email: <input type="text" id="mail" class="length" placeholder="eg: AnilAmbani@gmail.com"/>
        </div>
        <div class="input">
             Phone: <input type="text" id="phn"  class="length" placeholder="eg: 9898989898"/>
        </div>
        <div class="input">
             SLNO: <input type="number" id="sln" class="length" placeholder="eg: 1"/>
        </div>
        <br>
        <button id="entry"> I/P ENTRY</button>
    </div>
    <table id="tabledata">
       <tr>
          <th> Name</th>
          <th> Email</th>
          <th> Phone</th>
          <th> Slno</th>
       </tr> 
    </table>
</body>
<script>
    var entry = document.getElementById('entry');
    entry.addEventListener("click",display);
    var row = 1;
    function display(){
        var nam =  document.getElementById('name').value;
        var emal = document.getElementById('mail').value;
        var ph = document.getElementById('phn').value;
        var sl = document.getElementById('sln').value;
        var disp = document.getElementById("tabledata");
        var newRow = disp.insertRow(row);
        var cell1 = newRow.insertCell(0);
        var cell2 = newRow.insertCell(1);
        var cell3 = newRow.insertCell(2);
        var cell4 = newRow.insertCell(3);
        cell1.innerHTML = nam;
        cell2.innerHTML = emal;
        cell3.innerHTML = ph;
        cell4.innerHTML = sl;
        row++;
    }
</script>

Answer 14

可能无法解决此特定问题中描述的问题，但对希望从对象数组之外创建表的人们可能有用：

function createTable(objectArray, fields, fieldTitles) {
  let body = document.getElementsByTagName('body')[0];
  let tbl = document.createElement('table');
  let thead = document.createElement('thead');
  let thr = document.createElement('tr');
  fieldTitles.forEach((fieldTitle) => {
    let th = document.createElement('th');
    th.appendChild(document.createTextNode(fieldTitle));
    thr.appendChild(th);
  });
  thead.appendChild(thr);
  tbl.appendChild(thead);

  let tbdy = document.createElement('tbody');
  let tr = document.createElement('tr');
  objectArray.forEach((object) => {
    let tr = document.createElement('tr');
    fields.forEach((field) => {
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(object[field]));
      tr.appendChild(td);
    });
    tbdy.appendChild(tr);    
  });
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
  return tbl;
}

createTable([
  {name: 'Banana', price: '3.04'},
  {name: 'Orange', price: '2.56'},
  {name: 'Apple', price: '1.45'}
],
['name', 'price'], ['Name', 'Price']);

Answer 15

＆＃13;

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

＆＃13;

Answer 16

var div = document.createElement('div');
            div.setAttribute("id", "tbl");
            document.body.appendChild(div)
                document.getElementById("tbl").innerHTML = "<table border = '1'>" +
              '<tr>' +
                '<th>Header 1</th>' +
                '<th>Header 2</th> ' +
                '<th>Header 3</th>' +
              '</tr>' +
              '<tr>' +
                '<td>Data 1</td>' +
                '<td>Data 2</td>' +
                '<td>Data 3</td>' +
              '</tr>' +
              '<tr>' +
                '<td>Data 1</td>' +
                '<td>Data 2</td>' +
                '<td>Data 3</td>' +
              '</tr>' +
              '<tr>' +
                '<td>Data 1</td>' +
                '<td>Data 2</td>' +
                '<td>Data 3</td>' +
              '</tr>'

Answer 17

这是循环遍历javascript对象并将数据放入表格的方法，该代码是根据@Vanuan的答案修改的。

Java class: com.test.MyClass

Json file (src/main/resources/file.json):

{
  "name" : "com.test.MyClass"
}

使用Javascript创建表

17 个答案: