How can I apply an element ID to a newly created element through JavaScript DOM?
The code I have written creates a table which is triggered from a button.
I need to apply a unique ID to this table so it can be styled differently to others which appear on my site.
Here is a sample of my code:
var tab = document.createElement("ViewShoppingCart");
document.getElementById("shopping_list").appendChild(tab);
var tbdy = document.createElement("tbody");
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;
var total = 0;
for (var a = 0; a <= nameArray.length-1; a++) {
var tr = document.createElement("tr");
tbdy.appendChild(tr);
var td = document.createElement("td");
td.appendChild(document.createTextNode("x " + quantityArray[a]));
tr.appendChild(td);
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(nameArray[a]));
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(sumArray[a]));
tr.appendChild(td3);
}
Try
var tbdy = document.createElement("tbody");
tbdy.id = "newtbodyid";
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;
For applying styles consider using class selectors, you may not need IDs at all.
Note that if you want to create valid HTML you can't have duplicated IDs that significantly lessens value for CSS styles, especially for table data.
Related
I have table that I generate with the following js:
var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
var thd = document.createElement('thead');
var Headings = ["Lun","File","CDROM","Removable","ReadOnly","NoFUA"];
var tr = document.createElement('tr');
for (var i = 0; i < Headings.length; i++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(Headings[i]))
tr.appendChild(td);
}
thd.appendChild(tr);
for (var lun in data) {
console.log(lun);
var tr = document.createElement('tr');
tr.appendChild(document.createElement('td').appendChild(document.createTextNode(lun)));
for (var info in data[lun]) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(data[lun][info]))
tr.appendChild(td)
}
tbdy.appendChild(tr);
}
tbl.appendChild(thd);
tbl.appendChild(tbdy);
var table = document.getElementById('file-table');
and the following relevant HTML:
<table id="file-table" style="width:100%"></table>
the appendChild method you see in the last line of the js works however the intent of the creating the table in with the js is to do a complete replacement of all childNodes of 'file-table'.
I have tried iterating over the childNodes and using the removeChild method but this yields some interesting results - won't completely remove all nodes or sometimes an error message about the first parameter not being a Node.
Any ideas?
Could you select the target elements, and update them directly?
document.getElementById('td1').innerHTML = "Some text to enter"
If not, you could also replace the table body itself:
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
Can you help me plz. In my code i create elements(div) with table elements in it.
When i put "blue_button" - creates a new div with table in it. The table has 5 td rows. I need to numbering only 1st rows. I mean when i put blue_button twice, the first row in first table in first div - has number 1, the second(i need) must have number 2 (for example).
I "broke my brains". Help plz.
Here is my code:
var unitTableTrTd_1 = [];
var unit = document.createElement('div');
var unitTable = document.createElement('table');
unit.appendChild(unitTable);
var unitTableTr = document.createElement('tr');
unitTable.appendChild(unitTableTr);
var unitTableTrTd_1 = document.createElement('td');
var td_1_p = document.createTextNode("1");
unitTableTrTd_1.appendChild(td_1_p);
unitTableTr.appendChild(unitTableTrTd_1);
var unitTableTrTd_2 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_2);
var unitTableTrTd_3 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_3);
var unitTableTrTd_4 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_4);
var unitTableTrTd_5 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_5);
unit.id = "block";
wrapper.appendChild(unit);
Its very simple,
take a global variable table_index ( outside button click's callback )
var table_index = 0;
now on each button click's callback increment the table_index by 1, and use it;
table_index++;
var td_1_p = document.createTextNode( table_index );
Suppose this code to create a table with plain JavaScript using DOM (Fiddle):
var table = document.createElement('table');
for (var i = 1; i < 4; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode('Text1');
var text2 = document.createTextNode('Text2');
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.body.appendChild(table);
How can I add a class name or an id to its cells?
For example I want to be able to modify cells after their creation, so I want just :
table.getElementsByClassName("class").style.font-weight: "bold";
Use HTML DOM setAttribute() Method to add attributes to an element, like following :
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.setAttribute('class', 'className');
td2.setAttribute('class', 'className');
Hope this helps.
Do:
table.setAttribute("id", "myId");
Read up: MDN Element.setAttribute()
Use the same function to set class, just like #Zakaria mentioned.
I'm trying to create dynamically a table using JavaScript.
Here is the code I'm using (or here http://liveweave.com/mqG5iT):
function Process(){
CreatTable(['First Name', 'Last Name', 'Email']);
}
function CreatTable(data) {
var checkbox;
var table;
var thead;
var tr;
var th;
var tbody;
tablearea = document.getElementById('ShowDataID');
table = document.createElement('table');
table.id = "ContactsTable";
thead = document.createElement('thead');
tr = document.createElement('tr');
tbody = document.createElement('tbody');
//create columns input checkbox column
checkbox = CreateHTMLElement("chkBoxAllEmails", "chkBoxAllEmails", "SelectAllEmails()", "checkbox", "false");
th = document.createElement('th');
th.appendChild(checkbox);
tr.appendChild(th);
thead.appendChild(tr);
//create columns FirstName,LastName,Emails
for (var i = 0; i < data.length; i++) {
var headerTxt = document.createTextNode(data[i]);
th = document.createElement('th');
th.appendChild(headerTxt);
tr.appendChild(th);
thead.appendChild(tr);
}
table.appendChild(thead);
//create rows and addind to table
for (var i = 0; i < 2000; i++) {
tr = document.createElement('tr');
checkbox = CreateHTMLElement("11", "11", "11", "checkbox", "11");
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(checkbox); tr.cells[1].appendChild(document.createTextNode('John'+i.toString()));
tr.cells[2].appendChild(document.createTextNode('McDowell'));
tr.cells[3].appendChild(document.createTextNode('ddd#gmail.com'));
tbody.appendChild(tr);
table.appendChild(tbody);
}
document.getElementById("TablePagingArea").appendChild(table);
//return table;
}
function CreateHTMLElement(id, name, onclick, type, value) {
var HTMLElement = document.createElement('input');
HTMLElement.id = id;
HTMLElement.name = name;
HTMLElement.onclick = onclick;
HTMLElement.type = type;
HTMLElement.value = value;
return HTMLElement;
}
With a small set of data 1000-3000 rows it works relatively well but, some of the data set contains upwards of 5000 rows which causes Firefox to crash and close or become unresponsive.
My question is: is there a better way to accomplish what I am trying to do?
Most efficient way to create a bunch of elements is to create a string and create element from this string.
Most efficient way to create a string of element is to join from array
So you should refactor your code to
Create an array of elements like a[i] = "<tr><intput type='checkbox'></tr>";
Join an array to get one string var s = a.join();
Create DOM elements like var div = document.createElement('div'); div.innerHTML = s;
I am dynamically creating a table using JavaScript code below:
function CreatTable(data) {
var tablearea;
var table;
var thead;
var tr;
var th;
tablearea = document.getElementById('ShowDataID');
table = document.createElement('table');
thead = document.createElement('thead');
tr = document.createElement('tr');
for (var i = 0; i < data.length; i++) {
var headerTxt = document.createTextNode(data[i]);
th = document.createElement('th');
th.appendChild(headerTxt);
tr.appendChild(th);
thead.appendChild(tr);
}
table.appendChild(thead);
for (var i = 1; i < 4; i++) {
tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(document.createTextNode('John'));
tr.cells[1].appendChild(document.createTextNode('McDowell'));
tr.cells[2].appendChild(document.createTextNode('ddd#gmail.com'));
table.appendChild(tr);
}
tablearea.appendChild(table);
}
</script>
When I create table I also need to create checkbox column in the table above.
Any idea how I can implement it using JavaScript?
Or related link?
I'm not sure if this is what you're asking:
var checkbox = document.createElement("INPUT");
checkbox.type = "checkbox";
and then you'd append checkbox to each row in order to form a new column.
See this fiddle: http://jsfiddle.net/qeeu18g1/3/
I added comments where I added things.
(is this a duplicate of this question?)
Use the following JS code:
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.setAttribute("name", "city");
x.setAttribute("value", "London");
x.setAttribute("id", 1);
And place it whereever you want to add it.
See more at HTML DOM Input Checkbox Object