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
Related
It is a part of one of my projects and for this forum I made a simple and short version of it. Here, I had a table first. I saved the rows from it's tbody in an array called arr[]. Then I deleted the tbody and created another one. Then I going to append the tr enter code here elements saved in arr[] to the newly created tbody.
tbody.appendChild(arr[i]);
But it isn't working as the way I want. No tr elements is appended to newly created tbody. How can I make this happen?
var table=document.createElement('table');
var arr=[];
table.setAttribute('style','border:1px solid black;border-collapse:collapse;');
var thead=document.createElement('thead');
thead.setAttribute('style','border:1px solid black;border-collapse:collapse;');
for(i=0;i<1;i++){
var row=thead.insertRow(i);
for(j=0;j<2;j++){
var cell=row.insertCell(j);
cell.setAttribute('style','border:1px solid black;text-align:center;');
cell.innerHTML='tbheadCell'+j;
}
}
table.appendChild(thead);
var tbody=document.createElement('tbody');
tbody.setAttribute('style','border:1px solid black;');
for(i=0;i<2;i++){
var row=tbody.insertRow(i);
for(j=0;j<2;j++){
var cell=row.insertCell(j);
cell.setAttribute('style','border:1px solid black;text-align:center;');
cell.innerHTML='tbodyCell'+j;
}
arr.push(row);
}
table.appendChild(tbody);
document.body.appendChild(table);
table.removeChild(tbody);
var newtbody=document.createElement('tbody');
tbody.setAttribute('style','border:1px solid black;');
console.log(arr);
for(i=0;i<arr.length;i++){
tbody.appendChild(arr[i]);
}
table.appendChild(newtbody);
in the last loop you are appneding arr to tbody and append newtbody.
you should write:
for(i=0;i<arr.length;i++){
newtbody.appendChild(arr[i]);
}
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?
var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this+":nth-child(3)").text();
alert(thirdCell);
});
Something in the var thirdCell line is not working correctly. Each row has four children, all td tags. I want to get the text inside the third cell.
Try something like below,
var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this).find('td').eq(2).text();
alert(thirdCell);
});
this is not a string, it's a jquery object, so it can't be appended to when you are building your new selector. You could do it like this:
var selector = $(this).selector;
var thirdCell = $(selector+":nth-child(3)").text();
alert(thirdCell);
http://jsfiddle.net/2URV7/
This will not work because tr has no text. it has TDs. you can apply though html() to get the innerHTML of the tr, or use text() on tds if they actually contain text.
you can get all cells from each row by 0 based index
Rows.each(function(index, element) {
var thirdCell = $(this.cells[2]).text();
alert(thirdCell);
});
or you can get it in original selector
var Third = $("#tableid tbody tr > td:nth-child(3)");
Third.each(function(index, element) {
var thirdCell = $(this).text();
alert(thirdCell);
});
I'm trying to insert an onmouseover when creating new rows within my table however it's not appearing. Am I missing something stupid?
var row = document.createElement("TR");
row.id = i;
row.onmouseover = hover(i);
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);
The variable 'i' is the current number in the loop. The ID of the row appears fine, but not the onmouseover.
Use an anonymous function to create a closure for the value of i, and make sure you're setting a function to onmouseover, rather than the result of calling a function:
var row = document.createElement("TR");
(function (i) {
row.onmouseover = function () { hover(i) };
})(row.id);
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);
Taking a proper look at your code, it appears that you're not actually setting the id attribute of the TR element. However, you might want to avoid that entirely and use this context inside the hover function:
var row = document.createElement("TR");
row.onmouseover = hover;
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);
function hover() {
alert(this.rowIndex); // <-- `this` refers to the row element
}
You are assigning the result of the function to the event.
Needs to be something like
row.onmouseover=function(){hover(this);}
And it is better to use this since you have the DOM object and do not have to look up anything.
function hover( row ){
row.style.color = "red";
}
If you still what to go the i way, you need to change your id so it is valid. Ids can not start with a number.
var row = document.createElement("TR");
row.id = "row_i";
row.onmouseover = function(){ hover(this.id); }
var td1 = document.createElement("TD");
row.appendChild(td1);
tbody.appendChild(row);
Maybe try:
row.onmouseover = function() { hover(i); };
I am using this code to add a row to a table usign js:
var tbody = document.getElementById('tableID').getElementsByTagName('tbody')[0];
var row = document.createElement("TR");
tbody.appendChild(row);
I want to use onmouseover on that TR to make it change the background color, how can I do that?
row.onmouseover = function() { this.style.backgroundColor = "Green"; };