Создание таблицы с помощью Javascript

у меня есть функция JavaScript, которая создает таблицу с 3 строками 2 ячейки.

Может кто-нибудь сказать мне, как я могу создать таблицу, используя мою функцию (мне это нужно для моей ситуации)?



мой 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");

    }
775   8  

8 ответов:

Это должно работать (из нескольких изменений в вашем коде выше).

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)
}
77  
2015-07-06 13:18:50

немного короче код с помощью 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];

91  
2015-09-25 12:52:33 
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);
}
7  
2015-07-06 13:23:29 
<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>
5  
2015-07-06 13:22:06 
<!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>
3  
2014-12-03 15:02:04

Я надеюсь, вы найдете это полезным.

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);
3  
2017-05-30 11: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)
	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>'
};
1  
2017-09-26 14:40:21

может не решить проблему, описанную в этом конкретном вопросе, но может быть полезно для людей, которые хотят создавать таблицы из массива объектов:

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']);
0  
2018-09-30 18:49:55

Comments

    Ничего не найдено.
Click here to cancel reply.