126

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

4

17 回答 17

138

insertRow使用和略短的代码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];

于 2013-02-01T10:38:45.683 回答
121

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

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

于 2013-02-01T09:55:36.930 回答
18

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>

于 2015-06-03T10:02:30.713 回答
7
<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-03T17:36:10.173 回答
3

.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;
于 2020-12-17T16:39:37.287 回答
2
<!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-29T10:38:18.203 回答
2

我希望你觉得这有帮助。

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-30T08:59:42.020 回答
2

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

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

于 2018-09-30T15:49:55.970 回答
2

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

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

输出-

在此处输入图像描述

于 2021-07-25T13:21:29.733 回答
1
<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>

于 2020-02-05T06:53:25.043 回答
1

我编写了一个可以动态解析对象列表以将表创建为字符串的版本。我将其拆分为三个函数,用于编写标题列、正文行并将它们拼接在一起。我导出为字符串以在服务器上使用。我的代码使用模板字符串来保持优雅。

如果您想添加样式(如引导程序),可以通过向HEAD_PREFIXHEAD_SUFFIX.

// 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 );
于 2020-06-12T15:37:10.540 回答
0

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

于 2020-07-07T06:46:52.790 回答
0

这是使用 raphael.js 绘制表格的示例。我们可以使用 Raphael.js 直接在浏览器的画布上绘制表格 Raphael.js 是一个专为艺术家和平面设计师设计的 JavaScript 库。

<!DOCTYPE html>
<html>

    <head>
    </head>
    <body>
        <div id='panel'></div>
    </body>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>    
paper = new Raphael(0,0,500,500);// width:500px, height:500px

var x = 100;
var y = 50;
var height = 50
var width = 100;

WriteTableRow(x,y,width*2,height,paper,"TOP Title");// draw a table header as merged cell
y= y+height;
WriteTableRow(x,y,width,height,paper,"Score,Player");// draw table header as individual cells
y= y+height;
for (i=1;i<=4;i++)
{
var k;
k = Math.floor(Math.random() * (10 + 1 - 5) + 5);//prepare table contents as random data
WriteTableRow(x,y,width,height,paper,i+","+ k + "");// draw a row
y= y+height;
}


function WriteTableRow(x,y,width,height,paper,TDdata)
{ // width:cell width, height:cell height, paper: canvas, TDdata: texts for a row. Separated each cell content with a comma.

    var TD = TDdata.split(",");
    for (j=0;j<TD.length;j++)
    {
        var rect = paper.rect(x,y,width,height).attr({"fill":"white","stroke":"red"});// draw outline
        paper.text(x+width/2, y+height/2, TD[j]) ;// draw cell text
        x = x + width;
    }
}

</script>

</html>

请查看预览图片:https ://i.stack.imgur.com/RAFhH.png

于 2020-12-16T07:49:20.517 回答
0

您可能会发现这很有帮助

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

于 2021-03-08T20:10:33.287 回答
0

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>

于 2021-06-19T23:23:28.420 回答
-1

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

于 2017-09-26T11:40:21.590 回答
-1

这是如何遍历 javascript 对象并将数据放入表中,代码修改自 @Vanuan 的答案。

<body>
    <script>
    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');

      for (p in objectArray[0]){
        let th = document.createElement('th');
        th.appendChild(document.createTextNode(p));
        thr.appendChild(th);
        
      }
     
      thead.appendChild(thr);
      tbl.appendChild(thead);

      let tbdy = document.createElement('tbody');
      let tr = document.createElement('tr');
      objectArray.forEach((object) => {
        let n = 0;
        let tr = document.createElement('tr');
        for (p in objectArray[0]){
          var td = document.createElement('td');
          td.setAttribute("style","border: 1px solid green");
          td.appendChild(document.createTextNode(object[p]));
          tr.appendChild(td);
          n++;
        };
        tbdy.appendChild(tr);    
      });
      tbl.appendChild(tbdy);
      body.appendChild(tbl)
      return tbl;
    }

    createTable([
                  {name: 'Banana', price: '3.04'}, // k[0]
                  {name: 'Orange', price: '2.56'},  // k[1]
                  {name: 'Apple', price: '1.45'}
               ])
    </script>

于 2019-02-10T14:28:20.727 回答