Modifying Table Columns
var qty = qtyList.options[qtyList.selectedIndex].value var prodID = qtyList.name var total = "US$" + (qty * parseFloat(qtyList.form.elements[prodID + "Price"].value)) var newCellHTML total">" + total + "" if(Nav4) < document.layers[prodID + "TotalWrapper"].document.layers[prodID + "Total"].document.write(newCellHTML) document.layers[prodID + "TotalWrapper"].document.layers[prodID + "Total"].document.close() >else if (modifiable) < if (document.all) < document.all(prodID + "Total").innerHTML = newCellHTML >else < document.getElementById(prodID + "Total").innerHTML = newCellHTML >>
> // initialize global flag for browsers capable of modifiable content function init()
modifiable = (Ver4Up && document.body && document.body.innerHTML)
> // display content for all products (e.g., in case of Back navigation) function showAllTotals(form)
Modifying Table Cell Content
placeHolder += " " document.write("") document.write(" ") document.write("" + placeHolder + "") > else < document.write("" + Specify frames of a table
document.getElementById("myTable").frame="above" document.getElementById("myTable").frame="below" Specify rules for a table
document.getElementById("myTable").rules="rows" document.getElementById("myTable").rules="cols" | d | d |
| d | d |
| Row3 cell1 | Row3 cell2 |
| Row4 cell1 | Row4 cell2 |
| Row5 cell1 | Row5 cell2 |
Tabular data in Javascript with hyper link
> function sortByWinScore(a, b)
return b.winScore - a.winScore;
> function sortByLosScore(a, b)
return b.losScore - a.losScore;
a = a.winner.toLowerCase(); b = b.winner.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));
a = a.loser.toLowerCase(); b = b.loser.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));
> // Sorting function dispatcher (invoked by table column links) function sortTable(link)
switch (link.firstChild.nodeValue) < case "Year" : jsData.sort(sortByYear); break; case "Winner" : jsData.sort(sortByWinner); break; case "Loser" : jsData.sort(sortByLoser); break; case "Win" : jsData.sort(sortByWinScore); break; case "Lose" : jsData.sort(sortByLosScore); break; >drawTable("bowlData") > // Remove existing table rows function clearTable(tbody)
> // Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // remove existing rows, if any clearTable(tbody); // loop through data source for (var i = 0; i
Super Bowl Games
Transforming JavaScript Data into HTML Tables
loser:"Czechoslovakia", losScore:1>;
// Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // loop through data source for (var i = 0; i
Transforming JavaScript Data into HTML Tables
Transforming JavaScript Data into HTML Tables with HyperLink
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px>
loser:"Czechoslovakia", losScore:1>;
// Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // remove existing rows, if any clearTable(tbody); // loop through data source for (var i = 0; i
> // Remove existing table rows function clearTable(tbody)
> // Sorting function dispatcher (invoked by table column links) function sortTable(link)
switch (link.firstChild.nodeValue) < case "Year" : jsData.sort(sortByYear); break; case "Host Country" : jsData.sort(sortByHost); break; case "Winner" : jsData.sort(sortByWinner); break; case "Loser" : jsData.sort(sortByLoser); break; case "Win" : jsData.sort(sortByWinScore); break; case "Lose" : jsData.sort(sortByLosScore); break; >drawTable("matchData") return false > // Sorting functions (invoked by sortTable()) function sortByYear(a, b)
a = a.location.toLowerCase(); b = b.location.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));
> function sortByWinScore(a, b)
return b.winScore - a.winScore;
> function sortByLosScore(a, b)
return b.losScore - a.losScore;
a = a.winner.toLowerCase(); b = b.winner.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));
a = a.loser.toLowerCase(); b = b.loser.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));
Transforming JavaScript Data into HTML Tables
Using the cloneNode Method
/* JavaScript Unleashed, Third Edition by Richard Wagner and R. Allen Wyke ISBN: 067231763X Publisher Sams CopyRight 2000
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
| Row 3, Cell 1 | Row 3, Cell 2 |
| Row 4, Cell 1 | Row 4, Cell 2 |
| Row 5, Cell 1 | Row 5, Cell 2 |
Using the Data Binding record Number Property
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
document.oscars.recordset.AbsolutePosition = row.recordNumber
Academy Awards 1978-1997 (Click on a table row to extract data from one record.)
The award for Best Actor of went to for his outstanding achievement in the film .
Using the offsetParent Property
/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001
var cElement = document.all.myCell // Set flag for whether calculations should use // client- or offset- property measures. Use // client- for IE5/Mac and IE4/Windows; otherwise // use offset- properties. An ugly, but necessary // workaround. var useClient = (cElement.offsetTop == 0) ? ((cElement.offsetParent.tagName == "TR") ? false : true) : false if (useClient) < var x = cElement.clientLeft var y = cElement.clientTop >else < var x = cElement.offsetLeft var y = cElement.offsetTop >var pElement = document.all.myCell.offsetParent while (pElement != document.body) < if (useClient) < x += pElement.clientLeft y += pElement.clientTop >else < x += pElement.offsetLeft y += pElement.offsetTop >pElement = pElement.offsetParent > document.all.myDIV.style.pixelLeft = x document.all.myDIV.style.pixelTop = y document.all.myDIV.style.visibility = "visible"
The offsetParent Property
After the document loads, the script positions a small image in the upper left corner of the second table cell.
| This is the first cell | This is the second cell. |
Add HTML Table Rows & Cells In Javascript (Simple Examples)
Welcome to a quick tutorial on how to add HTML table rows and cells in Javascript. Need to dynamically update an HTML table using Javascript?
- Get the table – var table = document.getElementById(«TABLE»);
- Add a new row – var row = table.insertRow();
- Append the cells – var cell = row.insertCell();
- Set cell content – cell.innerHTML = «TEXT»;
That should cover the basics, but read on for more examples!
TLDR – QUICK SLIDES
TABLE OF CONTENTS
ADD ROWS & CELLS
All right, let us now get into the examples of adding rows and cells to HTML tables.
1) INSERT ROWS & CELLS
| A | B |
- By default, insertRow() will insert to the bottom of the table.
- Use insertRow(0) to add to the top of the table instead.
2) MANUAL HTML STRING
| B |
For you guys who prefer to do it the “manual HTML way”, this is the alternative. But a small word of advice – Directly changing the innerHTML is probably not that good for performance, especially when we have a massive table.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
SUPPORT
600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.
WHICH IS BETTER?
Personally, I am leaning towards the “object-oriented” create new rows and cells way. That is just a lot more convenient and easier, without having a write manual HTML code. But both methods are correct – Use whichever works best for you.
LINKS & REFERENCES
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
TableRow insertCell() Method
The insertCell() method inserts a cell into the current row.
Tip: Use the deleteCell() method to delete a cell in the current table row.
Browser Support
Syntax
Parameter Values
| Value | Description |
|---|---|
| index | Required in Firefox and Opera, optional in IE, Chrome and Safari. A number (starts at 0) that specifies the position of the new cell in the current row. The value of 0 results in that the new cell will be inserted at the first position. The value of -1 can also be used; which results in that the new cell will be inserted at the last position. |
If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari.
Technical Details
More Examples
Example
Insert new cell(s) with content at the end of a table row with >
Example
Insert new cell(s) with content at the index position 2 of a table row with >
Example
var firstRow = document.getElementById(«myTable»).rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = «New cell»;
Example
Delete the first cell(s) from a table row with >
Example
Insert new row(s) at the beginning of a table. The insertRow() method inserts a new row at the specified index in a table, in this example, the first position (the beginning) of a table with Then we use the insertCell() method to add cells in the new row.
var table = document.getElementById(«myTable»);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = «NEW CELL1»;
cell2.innerHTML = «NEW CELL2»;