So, I wanna create table which has only one row and that is perfectly aligned with a row of another table,
I know it is weird that why I wanna do that I can demonstrate that with this image.
I want all the rows to be aligned perfectly with each other except row 2,
All rows should have 5 cols but only row 2 have 3 cols.
I couldn't achieve this from increasing colSpan because it just aligns it with the next col.
So I think the only way to achieve this is to add another table inside a row but doing this compresses the table in the middle, like this pic
This is what I am doing:
let newTable = document.createElement("table");
let newRow = document.createElement("tr");
for (let i = 0; i < 3; i++)
{ newRow.appendChild(document.createElement("td")); }
newTable.appendChild(newRow);
// Added row
let row = document.createElement("tr");
row.id = "tempR" + btn;
let data = document.createElement("td");
data.colSpan = 7;
data.style.padding = "0px";
data.appendChild(newTable);
row.appendChild(data);
prevRow = document.getElementById("row" + btn).insertAdjacentElement("afterend", row);
Related
I want to highlight differences between the first row of a table and all the other rows column-wise.
I have figured out how to accomplish this when each cell in the table only has 1 item/comparison. But I would like to extend this to multiple comparisons per cell separated by ","s.
Here is the code for the single item per cell. https://jsfiddle.net/t19Lqbkn/
using the following code:
var table = document.getElementById("mytab1");
for (var i = 1, row; row = table.rows[i]; i++) {
var matc = table.rows[1]
for (var j = 0, col; col = row.cells[j]; j++) {
if (col.innerHTML !== matc.cells[j].innerHTML){col.innerHTML = "<span style='color: red;'>" + col.innerHTML + "</span>";}
}
}
And here is a table with multiple items per cell.
https://jsfiddle.net/6c7s9mky/
As you can see in the second link. The first column of the second row, only the item "Eve" should be red, and in the last row of the first column there should be no red color text.
String and Array have lots of cool methods
Here an example:
const base = "with,hello,string"
let comparison = "string,with,comma";
comparison = comparison.split(",").map(str =>
base.indexOf(str) !== -1?`<span style="color:red;">${str}</span>`:str
).join(",");
You can also find a way with RegExp.
I want to create a table by javascript. It should be a Appointment calender for events. with two rows and two lines per event. In the first line are the datenumber and the kind of event. In the second line are the weekday and the place, where the event are. For the Phase of Development I have only an exemple text. I include my js-file in my html-file but there isn't a table. Can someone check my code because I did not find a mistake
function dates(){
var test = 31;
var rows = 2;
var text_bsp = "example";
var tab = document.createElement("table");
var line1 = document.createElement("tr");
var line2 = document.createElement("tr");
var cell_date = document.createElement("td");
var cell_event = document.createElement("td");
var cell_day = document.createElement("td");
var cell_place = document.createElement("td");
var ausgabe = document.getElementById('content-container');
ausgabe.appendChild(tab);
for(var i=1;i < 32; i++)
{
tab.appendChild(line1);
for(var j=0;j<3;j++)
{
line1.appendChild(cell_date);
cell_date.createTextNode(text_bsp);
line1.appendChild(cell_event);
cell_event.createTextNode(text_bsp);
}
tab.appendChild(line2);
for(var k=0;j<3;k++){
line2.appendChild(cell_date);
cell_date.createTextNode(text_bsp);
line2.appendChild(cell_place);
cell_place.createTextNode(text_bsp);
}
}
}
I expected a table with 62 lines and 2 rows with the content 'example' in each cell.. But it dont work
If you call appendChild onto a Node that is already part of the DOM, it gets removed from its previous location and moved to the new one. You either have to clone before appending:
line1.appendChild(cell_date.cloneNode(true));
or just create new nodes inside of the loops.
There are are few changes required to achieve what you require. First, you'll need to move you row and cell creation inside the loop - currently you're creating one set of rows outside of the loop, before it begins.
Note also that you can't re-use the same row element, or cell element in the table to generate a table with multiple rows and cells - you need to create new element instances to achieve this.
Also consider using the insertRow(), insertCell() and document.createTextNode() methods as shown below:
function dates() {
var test = 31;
var rows = 2;
var text_bsp = "example";
var tab = document.createElement("table");
var ausgabe = document.getElementById('content-container');
ausgabe.appendChild(tab);
for (var i = 1; i < 32; i++) {
/*
Create line1 row inside of for loop, to produce
a new line for each iteration
*/
var line1 = tab.insertRow(line1);
for (var j = 0; j < 3; j++) {
/*
Create new cell_date and cell_event cells for
the current row we're creating
*/
var cell_date = line1.insertCell();
var cell_event = line1.insertCell();
/*
Create new text nodes for each cell via document
and append these to respective cell elements
*/
cell_date.append(document.createTextNode(text_bsp));
cell_event.append(document.createTextNode(text_bsp));
}
/*
As before, create line2 row inside of for loop
*/
var line2 = tab.insertRow();
for (var k = 0; j < 3; k++) {
var cell_date = line2.insertCell();
var cell_place = line2.insertCell();
cell_date.append(document.createTextNode(text_bsp));
cell_place.append(document.createTextNode(text_bsp));
}
}
}
dates();
<div id="content-container"></div>
I have a table with an id of "mytable", and I have a for loop that builds a 4x4 table, giving each cell an id from 0 to 15 and setting the innerHTML equal to that same number. Once cell is left blank, as this is going to be part of a sliding puzzle game where a user presses a button which scrambles the cells of the table, the solves it by shifting cell positions into that blank space. My issue at the moment is that I can't seem to implement a shuffle function that works. Below is my my code for building a table and shuffling it. See the comments for the error message.
function buildTable(){//need to build it with every cell being named
var tablelocation = document.getElementById('mytable');
var table = document.createElement('table');
table.id="newtable";
for(var i = 0; i<tableSize; i++){
var tableRow = table.insertRow();
for(var j = 0; j<tableSize; j++){
var arrTmp = (tableSize*tableSize-1)-(i*tableSize+j);
var cell = tableRow.insertCell();
cell.id = arrTmp;
if(arrTmp==15){
cell.className = "empty_cell";
else{
cell.className = "cell";
cell.appendChild(document.createTextNode(arrTmp));
}
}
}
tablelocation.appendChild(table);
}
Because the table is built from the bottom right to the top left I have a variable, that handles the values so that once the table is built the numbers appear in the table from 0 to 15 from top left to bottom right.
function shuffleTable(){//need to build it with every cell being named
var table = document.getElementById("newtable");
for (var i = 0; i<tableArray.length; i++) {
var tmp = tableArray[i];//array of shuffled ID values
var tmp2 = objectCellArray[tmp];
objectCellArrayShuffled.push(tmp2);
}
for (var j = 0; j<tableArray.length; j++){
var cell = table.cells[j];//fails here with undefined is not an object error
cell = objectCellArrayShuffled[j];
}
}
I'm calling shuffleTable with a button on my html page.
I want the title for each column on a table to be'A','B','C' etc, I want to be able to change how many columns there are so I want to use a loop.
Code so far:
JavaScript:
<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
for (var count = 0; count <= Rows; count++) {
var header = table.createTHead(0);
var row = header.insertRow(0);
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
</script>
HTML:
<div id='div1'><table id="dtable"></table></div>
You were creating one row in the header for each column.
Moving the thead creation outside the loop fixed it.
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var header = table.createTHead(0);
var row = header.insertRow(0);
Rows = 4
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
<div id='div1'><table id="dtable"></table></div>
You don't want to create a new row inside of the loop right? Move the head and row creation outside of the loop.
like:
<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
var header = table.createTHead(0);
var row = header.insertRow(0);
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
</script>
If you want it to look like a table with borders and such you'll have to add css styling but that should print a b c d e
Your problem is that you are creating the header and the row inside your for loop, which means that you will be creating a new row each time, which causes problems with row.insertCell. The first iteration works because you are inserting a cell in the 0th position, but the second iteration of the loop attempts to insert a cell in the 1st position, when a 0th position cell does not exist, hence why it throws an error. Try this and it should work for you:
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var Rows = 4;
var header = table.createTHead(0);
var row = header.insertRow(0);
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
<div id='div1'><table id="dtable"></table></div>
#Dilly,
Use this fiddle... As many other answers for the post - you need to create a row once and columns as many times as you wish... so loop for columns not rows. Which also reminds me to tell you - Please don't use loop count variable name as "Row" that is point of confusion. You should name it - numOfColumns for example.
Thanks to the comment, I added this commentary.
https://jsfiddle.net/shemdani/xjpekb94/1/
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
var row = table.insertRow(0);
Rows = 4
for (var count = 0; count < Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
Please read my question complete before answer or marking it duplicate because i am dealing with constraint in my problem.
Hi All Javascript rock stars,
I am creating a html table with javascript. In table i need scroller both vertical and horizontal. I am done with this part. It is working. Now my problem starts. When i am creating millions rows for the table it block my browser. For few thousand record it work fine.
I have done lot of google to improve performance but did not gain any significant performance improvement. Like some has suggested to use row.appendChild(cell); I have also tried to use Workers. But then i found i can not have access of document object in Workers. setTimeout is also not sufficient to solve my problem. Here is my code for creating rows of table.
var arr = JSON.parse(rcvReq.responseText);
var json = arr.abc;
var columns = [];
columns = Object.keys(json[0]);
//Build an array containing Customer records.
var customers = new Array();
customers.push(columns);
for (i = 0; i < json.length; i++) {
var dataVal = [];
for(j = 0; j < columns.length; j++){
var mytempvar = json[i];
dataVal.push(mytempvar[columns[j]+'']);
}
customers.push(dataVal);
}
//Create a HTML Table element.
var table = document.createElement("TABLE");
var table1 = document.createElement("TABLE");
table.border = "1";
//Get the count of columns.
var columnCount = customers[0].length;
//Add the header row.
var row = document.createElement('tr');
row.className = 'fixed-header';
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}
table1.appendChild(row);
//Add the data rows.
var documentFragment = document.createDocumentFragment();
for (var i = 1; i < customers.length; i++) {
row = document.createElement('tr');
for (var j = 0; j < columnCount; j++) {
var cellVal = customers[i][j];
var cell = document.createElement("TD");
cell.innerHTML = cellVal;
row.appendChild(cell);
}
setTimeout(function(){ }, 1000);
documentFragment.appendChild(row);
}
/* Event of button */
var siblings = e.parentNode.children;
var childOf1stShibling = siblings[0];
table.appendChild(documentFragment);
var div = document.createElement("DIV");
var dvTable = document.getElementById(siblings[1].id +'');
var dvTable1 = document.getElementById(childOf1stShibling.children[0].id + '');
dvTable.innerHTML = "";
dvTable1.innerHTML = "";
dvTable.appendChild(table);
dvTable1.appendChild(table1);
Constraint
No use of jquery. Only i can use javascript, css and html.
No use of third party plugin.
I can not use pagination.
Records are in millions not in thousand.
Please suggest any workaround keeping above constraint in mind.
Thanks so much in advance.
You can check the source of this JavaScript plugin and take the pieces you need. The whole plugin is about 300 rows of code, you can remove some parts if you do not need them. This is a link to their GitHub repo.
On their demo site they append 500k rows and the scroll is smooth.
You can not display that many DOM elements without "blocking" browser.
And there are no "optimization" techniques to handle this, the only option, as mentioned #dandavis would be to listen for scroll events and display subsets on-demand for current scroll position.
As said #Veselin Clusterize.js does exactly that, but it works vertically only. If you need to apply this technique for two directions (horizontally + vertically) - take a look at library called Fattable. Demo