I am building a large table on page load using javascript and I'm currently able to load the table portion in around 2 secs(on my machine of course). However, I was hoping it would be even faster. Any suggestions for improvement?
var fragment = document.createDocumentFragment();
var table=document.createElement('table')
table.className="table-bordered"
fragment.appendChild(table)
var body=document.createElement('tbody')
table.appendChild(body)
for (var i = 0; i < 200; i++) {
var row = document.createElement('tr');
body.appendChild(row);
for (var j = 0; j < 100; j++) {
var cell = document.createElement('td');
if(j!==0)
{cell.id="row"+i.toString()+"col"+(j-1).toString()
cell.className="myclass"
}
row.appendChild(cell);
}
}
Try moving this line: fragment.appendChild(table) to the very end of the code.
Otherwise, you are updating a table that is attached to the DOM and it may be trying to re-render things every time you add a new element.
It's likely the DOM rendering that's the bottleneck, so improving your code probably won't help much. However, I can suggest a few changes:
// declare all variables at head of code section--won't increase speed, but is good practice
var fragment = document.createDocumentFragment(),
table = document.createElement('table'),
body = document.createElement('tbody'),
i = 200,
j = 100,
row, cell;
table.className = "table-bordered";
table.appendChild(body);
// reverse while loop is faster than a traditional for loop
while(i--) {
row = document.createElement('tr');
body.appendChild(row);
while(j--) {
cell = document.createElement('td');
if(j !== 0) {
cell.id = ["row", i, "col", (j - 1)].join(""); // here we're joining an array instead of concatenating
// a string. Results in a minor improvement in speed.
cell.className = "myclass";
}
row.appendChild(cell);
}
j = 100;
}
// appending the table to the fragement after it's built means we don't modify the dom with each iteration of the below loops--this is
// probably the single largest improvement in speed
fragment.appendChild(table);
You can use
var inner_text = "<table><tbody>";
while(i--) {
var row = "";
row += "<tr> ";
while(j--) {
if(j !== 0) {
row +='<td ' + 'id="' + ["row", i, "col", (j - 1)].join("") +'"class="myClass"></td>';
}else{
row +='<td>' + '</td>';
}
}
row +=" </tr>";
inner_text +=row;
j = 100;
}
inner_text +="</tbody></table>";
That will reduce time to make new Element, append child.
Hope it helps you
Related
EDIT:
After some re-working to use another method (createElement) I've gotten my code to the point where it can properly call on elements, however it only uses the parameters of the last banner made at the end of the function. Here's the snippet of what I have to date.
function load() {
var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
var row = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var temp1 = staffB[staffI];
var temp2 = staffB[staffI + 1];
for (var i = 0; i < 10; i++) {
td.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="100%">';
td.onclick = function() { select (temp1) }
td2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="100%">';
td2.onclick = function() { select (temp2) }
}
row.appendChild(td);
row.appendChild(td2);
table.appendChild(row);
}
document.getElementById("staff").appendChild(table);
}
First time posting here, my apologies in advance for being a total nub.
So, to start off, I'm working on a page to assemble medieval-looking banners for a community that I'm part of, so in order to make it easy on myself to add/remove different banners in the future I made a modular HTML system using 'for'. When it's created it changes the names of the files it access to the names in an Array so that I only have to change the list and add a file. The HTML it creates is a table so that I can insert the images with two columns.
That table is then used for the selection menu as to which banner/curtain rod you'd be selecting. I have an ID attached to each <tr> based on the banner within (done during the creation of the HTML). Now I need to have it so that when they're clicked for selection, the sample image shown changes. Within the created HTML I created an onclick="select( Insert Banner Name Here )" in an effort to have the banner info transfer over to the next function, which is a switch.
I found out later that, from what I've seen, the function transfers a variable and not the word/data itself. I'm trying to think of a way I can code this so that, when called, the function knows what banner was clicked. When I tested the code it would always return [object HTMLTableCellElement].
In case I'm not making sense, this image may help. (Apologies for the bright colors, they're there so I can see the different divs easier).
The banners being selected are on the right, and the preview is on the left. The images on the right are within a table within a div (where the scroll bar is). That's where I'm trying to call my switch function from.
If anyone knows a way this is possible, or a better way of going about it I'd love for some help with it.
You might want to look into the document.createElement function.
http://www.w3schools.com/jsref/met_document_createelement.asp
With this you could do something like:
var staffB = ["http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
var row = document.createElement("tr");
var td = document.createElement("td");
for (var i = 0; i < 10; i++) {
td.innerHTML = '<img src=' + staffB[staffI] + '.png height="auto" width="100%">';
}
td.onclick = function () {
//Whatever function you like
alert(1);
}
row.appendChild(td);
table.appendChild(row);
}
document.body.appendChild(table);
This way you have an object approach to your elements and thereby better control over your event listeners.
EDIT 1:
Example using anonymous functions to maintain the current loop state:
var staffB = ["http://www.faster-minis.com/site/speed-mini.jpg", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI++) {
var row = document.createElement("tr");
for (var i = 0; i < 10; i++) {
var td = document.createElement("td");
td.innerHTML = '<img src=' + staffB[staffI] + ' height="auto" width="100%">';
//Anonymous scope to retain loop state
(function(a){
td.onclick = function () {
//Whatever function you like
//In here, "a" is the current "i"
alert(a);
alert(i);
}
})(i);
row.appendChild(td);
}
table.appendChild(row);
}
document.body.appendChild(table);
So, what I ended up doing was re-working it with divs instead. Doing that I was able to set the ID for each block, and from there send an onclick to a 'filter' function. The filter function then used the elements .id to extract which was which, and then send that info off to my switch function. Here's the code for those interested;
var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
var co1 = document.createElement("div");
var co2 = document.createElement("div");
var wide = (282 / 2 - 10);
co1.setAttribute("id", staffB[staffI]);
co1.setAttribute("onclick", "filter(this)");
co1.style.float = "left";
co1.style.width = wide;
co1.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="' + wide + '">';
co2.setAttribute("id", staffB[staffI + 1]);
co2.setAttribute("onclick", "filter(this)");
co2.style.float = "right";
co2.style.width = wide;
co2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="' + wide + '">';
document.getElementById("staff").appendChild(co1);
document.getElementById("staff").appendChild(co2);
}
And the filter function;
function filter(ele) {
var id = ele.id;
select (id);
}
Hope this helps someone else if they find this post.
I need to add a nested table to each row of a jquery datatable(using legacy datatables). So, I tried using example from datatables.net for child rows and modifying it to my needs as I need for the child rows to show at all times, rather than on clicking the parent row.Here is the code I am using both to build my inner table and then display it..
function buildInnerTable(){
var keys = Object.keys(reportApp.gridData),
len = keys.length,
j = 0,
prop,
value;
while (j < len) {
prop = keys[j];
value = reportApp.gridData[prop];
detLen = value.detail.length;
var rowVals = [];
for(var i = 0; i < detLen; i++){
tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
"<td>"+value.detail[i].bf+"</td>"+
"<td>"+value.detail[i].qtyship+"</td>"+
"<td>"+value.detail[i].ordqty+"</td>"+
"<td>"+value.detail[i].bf+"</td>"+
"<td>"+value.detail[i].exttreating+"</td>"+
"<td>"+value.detail[i].extpriceinvc+"</td>"+
"<td>"+value.detail[i].misc+"</td>"+
"<td>"+value.detail[i].extother+"</td>"+
"<td>"+value.detail[i].calcext+"</td></tr>";
rowVals.push(tmpRow);
}
setTableRow(rowVals , j);
j += 1;
}
function setTableRow(rowVals , ndx){
$("#gridTbl > tbody > tr:eq("+ ndx+ ")").after("<table><tr><th>InvtID</th>"+
"<th>Clss</th><th>Pieces</th><th>BilQty</th><th>BF</th><th>Treating</th>"+
"<th>Wood</th><th>NEED NAME</th><th>Other</th><th>Misc</th><th>Total</th></tr>"+
rowVals);
But, I am not getting what I need to get. What it looks like is that the datatables adds a new row and then sets the new table inside the first cell on new row. However, when I view source, that isn't what is happening at all. It closes the previous row and then inserts new table...
I am attaching a screenshot. What I need is for the details to show below the main item rows and to be aligned in same way. Any help in where I am wrong will be greatly appreciated.
Ok... Finally figured this out.
In order to make the view show normally, I had to add a new row to the datatable and then, in side that row, add my new table. However, this caused an indexing issue with the table. So, I had to check the index each time before I added new row. I am posting working code in the hope that it will help someone else.
function buildInnerTable(){
var keys = Object.keys(reportApp.gridData),
len = keys.length,
j = 0,
prop,
value;
while (j < len) {
prop = keys[j];
value = reportApp.gridData[prop];
detLen = value.detail.length;
var rowVals = [];
//THIS NEXT LINE IS WHERE I GET MY INDEX...
var ndx = ($("tr:contains("+value.invcnbr+ ")").index());
for(var i = 0; i < detLen; i++){
tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
"<td>"+value.detail[i].bf+"</td>"+
"<td>"+value.detail[i].qtyship+"</td>"+
"<td>"+value.detail[i].ordqty+"</td>"+
"<td>"+value.detail[i].bf+"</td>"+
"<td>"+value.detail[i].exttreating+"</td>"+
"<td>"+value.detail[i].extpriceinvc+"</td>"+
"<td>"+value.detail[i].misc+"</td>"+
"<td>"+value.detail[i].extother+"</td>"+
"<td>"+value.detail[i].calcext+"</td></tr>";
rowVals.push(tmpRow);
}
setTableRow(rowVals,ndx);
}
j += 1;
}
}
function setTableRow(rowVals,ndx){
var outerTbl = $('#gridTbl').DataTable();
var tr = $("#gridTbl > tbody > tr:eq("+ ndx+ ")");
//NOTE HOW I ADD A ROW AND THEN ADD NEW TABLE TO CELL IN THE ROW.
var innerTbl = "<tr><td colspan = 10><table style = 'background- color:#FFFFFF; width:100%; border:1px solid;'><tr><td>InvtID</td>"+
"<td>Clss</td><td>Pieces</td><td>BilQty</td><td>BF</td><td>Treating</td>"+
"<td>Wood</td><td>NEED NAME</td><td>Other</td><td>Misc</td><td>Total</td></tr>"+
rowVals + "</td></tr>";
tr.after(innerTbl).show();
}
I'm trying to make a script to make my applications tables more mobile friendly.
The tables are all very similar, but very in number of row and columns, since they will be dynamically created, I'll have little control over this, so i've come up with the script below, it almost works but one function is not be passed on to each table, it stops after the first.
I suggest looking at the js fiddle: http://jsfiddle.net/e4vC3/1/
Here is the piece of the script that is not working correctly:
// Create content for new headers in mobile table by copying from original table
var HeaderArray = [];
$("table thead tr th").each(function(){
var innerArray = [];
$(this).each(function () {
innerArray.push($(this).text());
});
HeaderArray.push(innerArray); // Put content for new headers in array
});
$("table.mobile_table tbody tr").each(function(index, elem){ // Place content of array where array position and row index are the same
$(this).find("td").first().text(HeaderArray[index]);
});
Again, if you check the fiddle, you will see that the first arry stops copying objects after the first table, i cant get it to run all the way thought.
If anyone could help me with them, i would really, realy appreciate it..... http://jsfiddle.net/e4vC3/1/
The problem is that there are multiple data rows while only 1 header row. So, you will have to use mod operator like this(index has been replaced with index % TableSize):
$("table.mobile_table tbody tr").each(function(index, elem){ // Place content of array where array position and row index are the same
$(this).find("td").first().text(HeaderArray[index % TableSize]);
});
Updated your code # http://jsfiddle.net/souviiik/e4vC3/4/, see if this is helpful. For the first mobile_table I was not able to put the TH values, I hope you can modify my code :)
var TableSize = $("#ContactsPhoneTable .tableHedaer").size(); // Get # of columns
var i = 1;
var TableRowCount = $(".no_edit").size(); // Get # of body rows
$(".tableHedaer").each(function () {
$(this).attr("id", i++); // Give headers incrementing ID
});
for (var CreateTables = 1; CreateTables < TableRowCount; CreateTables++) { // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
for(var i = 0 ; i < TableSize ; i++)
{
var tableRow = $("<tr/>").appendTo(".mobile_table");
for(var j = 0 ; j < TableRowCount ; j++)
{
var cellValue = $("#ContactsPhoneTable").find("tr").eq(i).find("td").eq(j).text();
$("<td/>", {
text: cellValue
}).appendTo(tableRow);
}
}
Updated code is at http://jsfiddle.net/souviiik/b6QZT/2/, see if this is acceptable. The code is as below.
var columnCount = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var rowCount = $("table tbody tr").size(); // Get # of body rows
for (var CreateTables = 0; CreateTables < rowCount; CreateTables++) { // Create new table class="mobile_table" for each row
$("<table/>", {
"class": "mobile_table"
}).appendTo(".newTableContainer");
}
var tableHedaers = [];
for(var th = 0 ; th < columnCount ; th++)
{
tableHedaers.push($(".sortable th").eq(th).text());
}
$(".mobile_table").each(function(idx){
var thisTable = $(this);
for(var i = 0 ; i < columnCount ; i++)
{
var thisTableRow = $("<tr/>").appendTo(thisTable);
for(var j = 0 ; j < 2 ; j++)
{
if(j == 0)
{
$("<td/>", {
"text": tableHedaers[i],
"style": "font-weight: 700"
}).appendTo(thisTableRow);
}
else
{
var cellValue = $("#ContactsPhoneTable").find("tr").eq(idx+1).find("td").eq(i).text();
$("<td/>", {
"text": cellValue
}).appendTo(thisTableRow);
}
}
}
});
I'm trying to make some of my columns span for readability, as well as pattern recognition. I'm also changing the background color of the cells to show patterns. If the data in my array is null, I use red. If it is not null and spans at least 2 columns, it is blue, otherwise, it is grey. I'm finding that some of my columns are wider than they should be, and some are shorter. With my data, the first columns are the only ones too wide, and the last are the only ones too short. So far as I can tell however, their colors are correct. I can give example code, but not example data as it is highly confidential. I can give the code, and will. Why are some of my columns wider, and others shorter than I expect them to be?
function loadTable() {
var fields = JSON.parse(localStorage.getItem("boxFields"));
var report = JSON.parse(localStorage.getItem("boxReport"));
var space = document.getElementById("batchReport");
var baseList = document.createElement("ul");
space.appendChild(baseList);
for (var i = 0; i < fields.length; i++) {
var li = document.createElement("li");
baseList.appendChild(li);
var header = document.createElement("h2");
header.textContent = fields[i] + ":";
li.appendChild(header);
if (report.length > 0) {
var table = document.createElement("table");
table.className += "wide";
li.appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
td.colSpan = report.length;
tr.appendChild(td);
tr = document.createElement("tr");
table.appendChild(tr);
var compare = "NeverEqual";
var count = 0;
td = null;
for (var j = 0; j < report.length; j++) {
if (compare == report[j][i]) {
count++;
td.colSpan = count;
if (compare != null)
td.style.backgroundColor = "#336";
} else {
count = 1;
compare = report[j][i];
td = document.createElement("td");
tr.appendChild(td);
td.textContent = report[j][i];
//td.colSpan = 1;
if (compare != null)
td.style.backgroundColor = "#333";
else {
td.style.backgroundColor = "#633";
}
}
}
}
}
space.style.height = "93%";
space.style.overflow = "auto";
}
Your not specifying explicit widths for the table cells so they'll be auto calculated based on their content and the fallback logic the browser / IE does. If you want to have a cell have a specific width apply either a class to it or set it's with property explicity, e.g.:
td.style.width = "50px";
Or
td.className = "myCell";
// and in css somewhere define the class
.myCell{
width: 50px;
}
Is there an easy way to combine rows in an HTML table where the first column is the same? I basically have a table set up like:
<table>
<tr><td>test</td><td>12345</td><td>12345</td><tr>
<tr><td>test</td><td>12345</td><td>12345</td><tr>
<tr><td>test2</td><td>12345</td><td>12345</td><tr>
<tr><td>test</td><td>12345</td><td>12345</td><tr>
<tr><td>test2</td><td>12345</td><td>12345</td><tr>
</table>
and I want it to generate:
<table>
<tr><td>test</td><td>37035</td><td>37035</td><tr>
<tr><td>test2</td><td>24690</td><td>24690</td><tr>
</table>
using jQuery:
var map = {};
$('table tr').each(function(){
var $tr = $(this),
cells = $tr.find('td'),
mapTxt = cells.eq(0).text();
if(!map[mapTxt]){
map[mapTxt] = cells;
} else {
for(var i=1, l=cells.length; i<l; i++){
var cell = map[mapTxt].eq(i);
cell.text(parseInt(cell.text()) + parseInt(cells[i].text()));
}
$tr.remove();
}
});
this is a "dumb" script -- no error handling for cases like different number of cells, fields being non-numeric, etc. Add those if necessary.
Also, depending on how it's generated, it's better to do this server-side.
Here's a plain JavaScript version.
window.onload = function() {
var table = document.getElementById('mytable');
var tr = table.getElementsByTagName('tr');
var combined = Array();
for (i = 0; i < tr.length; i++) {
var td = tr[i].getElementsByTagName('td');
var key = td[0].innerText;
if (!combined[key]) {//if not initialised
combined[key] = Array();
for (j = 0; j < td.length - 1; j++) combined[key][j] = 0;
}
for (j = 0; j < td.length - 1; j++)
combined[key][j] += parseInt(td[j + 1].innerText);
}
while (table.hasChildNodes()) table.removeChild(table.lastChild);
var tbody = document.createElement('tbody');//needed for IE
table.appendChild(tbody);
for (var i in combined) {
tr = document.createElement('tr');
tbody.appendChild(tr);
td = document.createElement('td');
td.innerText = i;
tr.appendChild(td);
for (j = 0; j < combined[i].length; j++) {
td = document.createElement('td');
td.innerText = combined[i][j];
tr.appendChild(td);
}
}
}
This will work on tables with any number of rows and any number of cells. I suppose you want to make the sum for every column, that's what this script does.
And as cwolves mentioned, it is more logical to do this serverside. Users that have JS disabled will see the not so clean uncombined table.