简体   繁体   English

使用 Javascript 创建表格

[英]Create table using Javascript

I have a JavaScript function which creates a table with 3 rows 2 cells.我有一个 JavaScript 函数,它创建一个包含 3 行 2 个单元格的表格。

Could anybody tell me how I can create the table below using my function (I need to do this for my situation)?谁能告诉我如何使用我的函数创建下表(我需要根据我的情况执行此操作)?

Here is my javascript and html code given below:这是我的 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>

Slightly shorter code using insertRow and insertCell :使用insertRowinsertCell代码略短:

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

Also, this doesn't use some "bad practices", such as setting a border attribute instead of using CSS, and it accesses the body through document.body instead of document.getElementsByTagName('body')[0] ;此外,这并没有使用一些“坏习惯”,例如设置border属性而不是使用 CSS,并且它通过document.body而不是document.getElementsByTagName('body')[0]访问body

This should work (from a few alterations to your code above).这应该可以工作(从对上面的代码进行一些更改)。

 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('\ ')) i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null; tr.appendChild(td) } } tbdy.appendChild(tr); } tbl.appendChild(tbdy); 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); } 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>
<!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>

I hope you find this helpful.我希望你觉得这有帮助。

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

Might not solve the problem described in this particular question, but might be useful to people looking to create tables out of array of objects:可能无法解决此特定问题中描述的问题,但可能对希望从对象数组创建表的人有用:

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

Here is the latest method using the .map function in javascript.这是在 javascript 中使用.map函数的最新方法。

Simple table code..简单的表代码..

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

and here is javascript code to append something in the table body.这是用于在表正文中附加某些内容的 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;
<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>

I wrote a version that can parse through a list of objects dynamically to create the table as a string.我编写了一个版本,可以动态解析对象列表以将表创建为字符串。 I split it into three functions for writing the header columns, the body rows, and stitching it all together.我将其拆分为三个函数,用于编写标题列、正文行并将它们拼接在一起。 I exported as a string for use on a server.我导出为字符串以在服务器上使用。 My code uses template strings to keep things elegant.我的代码使用模板字符串来保持优雅。

If you want to add styling (like bootstrap), that can be done by adding more html to HEAD_PREFIX and HEAD_SUFFIX .如果要添加样式(如引导程序),可以通过向HEAD_PREFIXHEAD_SUFFIX添加更多 html 来HEAD_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}`;
}

Here's an example use:这是一个使用示例:

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

This solution will be perfect when you want rows and columns dynamic.当您想要动态行和列时,此解决方案将是完美的。 You can accept rows and columns as arguments.您可以接受行和列作为参数。

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

Output -输出-

在此处输入图片说明

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

Here is an example of drawing a table using raphael.js.这是使用 raphael.js 绘制表格的示例。 We can draw tables directly to the canvas of the browser using Raphael.js Raphael.js is a javascript library designed specifically for artists and graphic designers.我们可以使用 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>

Please check the preview image: https://i.stack.imgur.com/RAFhH.png请查看预览图: https : //i.stack.imgur.com/RAFhH.png

You might find this very helpful你可能会发现这很有帮助

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

So you create the table head according to the number of columns you want and the rows will depend on the number you specified in the iteration..... ie this one will be 3.所以你根据你想要的列数创建表头,行数将取决于你在迭代中指定的数量.....即这个将是 3。

 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>

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

This is how to loop through a javascript object and put the data into a table, code modified from @Vanuan's answer.这是如何遍历 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM