I have a JavaScript function which creates a table with 3 rows 2 cells.
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:
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> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> <tr> <td> </td> </tr> </table>17 Answers
Slightly shorter code using insertRow and 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();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];
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('\u0020')) 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></div><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <table 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> Here is the latest method using the .map function in javascript. You create a table in html and then insert body with javascript.
const data = [{Name:'Sydney', Day: 'Monday', Time: '10:00AM'},{Name:'New York', Day: 'Monday',Time: '11:00AM'},]; // any json data or array of objects const tableData = data.map(function(value){ return ( `<tr> <td>${value.Name}</td> <td>${value.Day}</td> <td>${value.Time}</td> </tr>` ); }).join(''); const tabelBody = document.querySelector("#tableBody"); tableBody.innerHTML = tableData; <table border="2"> <thead> <tr> <th scope="col">Tour</th> <th scope="col">Day</th> <th scope="col">Time</th> </tr> </thead> <tbody> </tbody> </table>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 -
<!DOCTYPE html> <html> <body> <p> <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" value="4" /> X</td> <td><input type="text" value="7" />Y</td> </tr> </table> <br/> <button 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="<buttondelete"+" onclick="+"deleteTable()"+">Delete top Row </button>"; document.write(s); var relod="<buttonrelod"+" 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> <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']);<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 > <div> Name: <input type="text" placeholder="eg: Anil Ambani"/> </div> <div> Email: <input type="text" placeholder="eg: "/> </div> <div> Phone: <input type="text" placeholder="eg: 9898989898"/> </div> <div> SLNO: <input type="number" placeholder="eg: 1"/> </div> <br> <button> I/P ENTRY</button> </div> <table> <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.
// helper functions const TABLE_PREFIX = '<div><table>'; 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 is how to loop through a javascript object and put the data into a table, code modified from @Vanuan's answer.
<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>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. 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.
<!DOCTYPE html> <html> <head> </head> <body> <div id='panel'></div> </body> <script src=""> </script> <script src=""></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:
2You 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..... i.e this one will be 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 © <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>' };
