I dynamically create a table in javascript and append it to a div. The resulting table seems to have all the same tags and stylings as a straight up html table I used in the proof of concept, yet the table cells do not stretch.
When I place a border on the table, I see that the table itself is at 100% width, but the outlined cells simply do not stretch to fill it out (it looks like a table inside another one cell table in Chrome).
Both IE and Chrome give me the same behavior.
Here is my code:
var tbl = document.createElement("table");
tbl.cellPadding = 0; tbl.cellSpacing = 0;
var tblBody = document.createElement("tblBody");
var tr = document.createElement("tr");
var td;
td = document.createElement("td");
td.style.width="70px";
td.appendChild(this.getFirstDiv());
tr.appendChild(td);
td = document.createElement("td");
td.style.width="300px";
td.appendChild(this.getSecondDiv());
tr.appendChild(td);
td = document.createElement("td");
td.appendChild(this.getThirdDiv());
tr.appendChild(td);
tblBody.appendChild(tr);
tbl.appendChild(tblBody);
I feel like I am missing something obvious here. I have tried display attributes for table and table-row. I have tried width: auto.
What am I missing?
Related
I am trying to clean up my html tables by removing the rows and rows of td's and th's and automate it by using a script.
I found this solution here
function createTable(tableData) {
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.body.appendChild(table);
}
createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]);
Now, before I try to edit the contents of the cells, I wanted to make sure this would work inside my document by copying and pasting and lo it does not.
Here is the fiddle of the original document:
https://jsfiddle.net/frodomeg/5u6czpfa/
And here is the fiddle where I'm trying to place the new script in each of the divs:
https://jsfiddle.net/frodomeg/07dbwmy4/2/
As you can see in the second link, what is happening is the output is generating at the bottom of the page rather than in each of the divs. I honestly have no idea what I'm doing wrong as I'm very new to js.
Any thoughts?
Thanks
the output is generating at the bottom of the page rather than in each of the divs
You said:
document.body.appendChild(table);
… which is the end of the <body> element.
If you want it inside a div, then you need to append it to a div and not to the body.
I am generating a simple html-table and would like columns of different widths in the same row. However when I try to set the width either with pixels or with %, there is no change in the display. Also, the first column ('td' element) added is always much wider than other columns added later. I have tried setting the width after creating an element and before appending it as a child node as well as setting the width only after appending the element as a child node. Here is an example of what I have tried:
var tr = document.createElement('TR');
tr.style.margin = "50px"
//scoring column
var td0 = document.createElement('TD')
td0.style.padding = '1em'
td0.style.width = '2px'
var tr11 = document.createElement('TR');
tr11.style.margin = "50px"
tr11.innerHTML ="score: " + ascore_array[i + offset];
var tr22 = document.createElement('TR');
tr22.style.margin = "50px"
tr22.innerHTML ="num votes: " + anumVotes_array[i + offset];
td0.appendChild(tr11)
td0.appendChild(tr22)
//answer column
var td1 = document.createElement('TD')
td1.style.padding = "1em"
td1.innerHTML = auser_array[i + offset]
tr.appendChild(td0)
td0.style.width = "20%"
tr.appendChild(td1)
td1.style.width = "30%"
As you can see in the code above, I have tried both px and % as units of width. I have also tried setting the width both before and after setting an element as a child node. There is no change in my code. Also, I am using css templates, but they only set default background colors for my table elements. There is nothing in the css to regular td element sizing. Also I have tried resizing the tr elements within the td elements but this also has no effect.
I am using Chrome as my browser.
What am I doing wrong and how can I fix it?
Ok I think I see what the problem is. There is a <col style="width: 80%;"> and a <col style="width: 20%;"> inbetween the root <table> and <tbody> which is overriding your styles in the <td> below
maybe this can help you
var cell = document.createElement('td');
parent.appendChild(cell);
cell.style.width = '200px';
http://jsfiddle.net/ZvEDn/1/ç
here is the question where i found it
how to set cell width in javascript just after creating it with 'document.createElement()' method?
I am creating a table as follows
table = document.createElement('table');
table.style.textAlign = 'center';
table.setAttribute('border', '2');
var thead = document.createElement('thead');
thead.style.color = "fuchsia ";
thead.style.textAlign = 'center';
When I populate the table, the row content is center aligned as expected but the header row is always left aligned. What can I do to make it center aligned?
Thanks
thead is a container for th's. The th's always need to fill the thead and so the natural place to centre align things for a header row is within the th's, so...
var th = document.createElement('th');
th.style.color = "fuchsia ";
th.style.textAlign = 'center';
Oh, and also, your thead hasn't got the centre alignment set, you're setting it on the table twice.
I'm trying to dynamically create a table from js, although I do know the exact width and height of the table, I do not know the actual width of table cell. I know that it is possible to find the width of the each cell, but I was wondering if you can actually lock it without specifying the width of the cell.
Link to jsfiddle:
http://jsfiddle.net/j3TEz/21/
My js file:
window.addEventListener('load',init,false);
function init(){
var table = document.getElementById('myTable');
var tr = 3;
var td=5;
var innerTable = '';
for(var trCounter=0;trCounter<tr;trCounter++){
innerTable+='<tr>';
for(var tdCounter=0;tdCounter<td;tdCounter++){
var id=(trCounter*td)+tdCounter;
innerTable+='<td id="'+id+'" onclick="addText('+id+')"></td>';
}
innerTable+='</tr>';
}
table.style.width="600px";
table.style.height="300px";
table.style.border="1px solid black";
table.innerHTML=innerTable;
}
function addText(id){
document.getElementById(id).innerHTML="Lorem Ipsum";
}
Css table-layout set to fixed will keep the columns width fixed, the size will be determined by the first row columns.
Hope this help.
I'm adding new rows to a table dynamically, with this code:
tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
th = tr.insertCell(0);
td = tr.insertCell(1);
But what I actually got are two td cells. I want a th, as you can see.
It says the tagName property isn't changeable.
How can I do this?
Will I need to use 'normal' methods like createElement and appendChild?
I don't see any official docs that allow you to do this.
W3C Documentation for TR / TR.insertCell
The createElement/appendChild will work though.
I got it to work this way:
var table = d3.select("#table");
table.html("");
head = table.append("tr");
head.append("th").text("column_header_1");
head.append("th").text("column_header_2");
chartData.forEach(function (obj) {
row = table.append("tr");
row.append("td").text(obj.datapoint_1);
row.append("td").text(obj.datapoint_2);
What I do is define the th first, such as TableHeaderRow thr = new TableHeaderRow();
Add cell to it, then add it to the table.
a fast and working approch would be using a <b></b> tag in the innerHtml
tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
td = tr.insertCell(1);
th = tr.insertCell(0);
th.innerHtml = '<b>th cell1</b>
th = tr.insertCell(1);
th.innerHtml = '<b>th cell2</b>
//and so on