I'm trying to create a table dynamically using JavaScript. So far i'm trying to understand what am i doing wrong. At first i'm making a table element and then i set id for that element. After that i'm looping through rows and as i do that, i create new columns in each new row. The problem which i'm having is that it stops making only 1st row. Can someone point out mistake im making?
var x = document.createElement("TABLE");
x.setAttribute("id", "newTable");
document.body.appendChild(x);
for (i=1;i<5;i++){
var y = document.createElement("TR");
y.setAttribute("id", "newTr");
document.getElementById("newTable").appendChild(y);
for (j=1;i<10;i++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}
}
var x = document.createElement("TABLE");
x.setAttribute("id", "newTable");
document.body.appendChild(x);
for (i=1;i<5;i++){
var y = document.createElement("TR");
y.setAttribute("id", "newTr"+i);
document.getElementById("newTable").appendChild(y);
for (j=1;j<10;j++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr" +i).appendChild(z);
}
}
i changed your second for-loop from i to j and i made the td-element id unique.
I think you will find that you mixed up jand i
for (j=1;i<10;i++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}
try
for (i=1;i<10;i++){ //j here changed to i;
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}
Related
I want to create a table with 4 rows with 3 columns, I am doing this way but with this code I am not getting anything. What I am doing wrong here?
let cell = ["a","b","c","x"];
let cell1 = ["d","e","f","y"];
let cell2 = ["g","h","i","z"];
function myFunction() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
for(let i=0; i< 3; i++){
var y = document.createElement("TR");
y.setAttribute("id", myTr[i])
document.getElementById("myTable").appendChild(y);
var z = document.createElement("TD");
var t = document.createTextNode(cell[i]);
var z1 = document.createElement("TD");
var s = document.createTextNode(cell1[i]);
var z2 = document.createElement("TD");
var r = document.createTextNode(cell2[i]);
z.appendChild(t);
z1.appendChild(s);
z2.appendChild(r);
document.getElementById(myTr[i]).appendChild(z);
document.getElementById(myTr[i]).appendChild(z1)
document.getElementById(myTr[i]).appendChild(z2)
}
}
<button onclick="myFunction()">Create</button>
After defining myTr it seems to work. And - like Carsten Løvbo Andersen already mentioned - your for loop needs to run through all elements of the given cells. I replaced your 3 with cell1.length.
let cell = ["a","b","c","x"];
let cell1 = ["d","e","f","y"];
let cell2 = ["g","h","i","z"];
const myTr=["a","b","c","d"];
function cmFunction(arr){
const transp=arr[0].map(a=>Array());
arr.forEach((ar,i)=>ar.forEach((a,j)=>transp[j][i]=a))
document.body.innerHTML+='<table class="myTable"><tbody>'
+transp.map((r,i)=>'<tr class="'+myTr[i]+'"><td>'+r.join("</td><td>")+"</td></tr>").join("\n")
+'</tbody></table>';
}
function myFunction() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
for(let i=0; i< cell1.length; i++){
var y = document.createElement("TR");
y.setAttribute("id", myTr[i])
document.getElementById("myTable").appendChild(y);
var z = document.createElement("TD");
var t = document.createTextNode(cell[i]);
var z1 = document.createElement("TD");
var s = document.createTextNode(cell1[i]);
var z2 = document.createElement("TD");
var r = document.createTextNode(cell2[i]);
z.appendChild(t);
z1.appendChild(s);
z2.appendChild(r);
document.getElementById(myTr[i]).appendChild(z);
document.getElementById(myTr[i]).appendChild(z1)
document.getElementById(myTr[i]).appendChild(z2)
}
}
<button onclick="myFunction()">Create</button>
<button onclick="cmFunction([cell,cell1,cell2])">CreateNew</button>
I edited the script in order to show you that the whole thing can be done in a much simpler way. In my version cmFunction() I replaced the id attributes by class ones as this will allow for repetitions (if the "create" is clicked repeatedly).
I want to create a bookmarklet by using javascript, which can retrieve max length of all text box in the page, and then print a table below the page with all id and max length indicated.
Here is my code, however it did not print anything.
javascript: (function() {
var body =document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
var D = document,
i, f, j, e;
for (i = 0; f = D.forms[i]; ++i)
for (j = 0; e = f[j]; ++j)
if (e.type == "text") S(e);
function S(e) {
var l= document.getElementById(e.id);
var x = document.getElementById(e.maxlength);
var tr=document.createElement('tr');
var td1=document.createElement('td');
var td2=document.createElement('td');
td1.appendChild(document.createTextNode(l));
td2.appendChild(document.createTextNode(x));
tr.appendChild(td1);
tr.appendChild(td2);
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
})
This can actually be done much simpler than you have it.
Working jsfiddle: https://jsfiddle.net/cecu3daf/
You want to grab all of the inputs and run a loop over them. From this you can dynamically create a table and append it to the end of the document.body
var inputs = document.getElementsByTagName("input"); //get all inputs
var appTable = document.createElement("table"); //create a table
var header = appTable.createTHead(); //create the thead for appending rows
for (var i=0; i<inputs.length; i++) { //run a loop over the input elements
var row = header.insertRow(0); //insert a row to the table
var cell = row.insertCell(0); //insert a cell into the row
cell.innerHTML = inputs[i].maxLength; //input data into the cell
var cell = row.insertCell(0);
cell.innerHTML = inputs[i].id;
}
document.body.appendChild(appTable); //append the table to the document
To make it a bookmark, simply place the javascript: before hand. There is no need to encase it in a function. You can if you'd like to.
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
I am creating a table, two rows, and two cells in each row in my code. For this purpose, I've got the following code:
var t = document.createElement('table');
document.body.appendChild(t);
for (var x = 0; x <= 1; x++) {
var tr = document.createElement('tr');
t.appendChild(tr);
for (var y = 0; y <= 1; y++) {
var td = document.createElement('td');
tr.appendChild(td);
}
}
Now, I need to create a text node in the first cell and create a a element in the second cell. How would I do that?
It's actually more code to do a "two-step" loop, than to write it out in full:
var t = document.createElement('table'),
trs = [document.createElement('tr'),document.createElement('tr')],
tds = [
[document.createElement('td'),document.createElement('td')],
[document.createElement('td'),document.createElement('td')]
];
trs[0].appendChild(tds[0][0]); trs[0].appendChild(tds[0][1]);
trs[1].appendChild(tds[1][0]); trs[1].appendChild(tds[1][1]);
t.appendChild(trs[0]); t.appendChild(trs[1]);
// now append more stuff here to the tds
document.body.appendChild(t); // do this last - it's better
var t = document.createElement('table');
document.body.appendChild(t);
for (var x = 0; x <= 1; x++) {
var tr = document.createElement('tr');
t.appendChild(tr);
for (var y = 0; y <= 1; y++) {
var td = document.createElement('td');
tr.appendChild(td);
if(y == 0){
alert("here");
var a = document.createElement('A');
td.appendChild(a);
alert("here");
}
else{
var div = document.createElement('div');
td.appendChild(div);
//Create text node
}
}
}
Inside your loop check if y == 0, if it is then you are at your first td therefore you create a link.
If y == 1 you are at the second td therefore you create textnode
Replace div with whatever you want.
inside your second loop just check for if (y == 0) then create text inside the td and if (y == 1) then create an a inside the td.
another way would be to just define the table in text.
eg:
var t = document.createElement('table');
t.innerHTML = "<tr><td>text</td><td><a href='#'>link</a></td></tr><tr><td>text</td><td><a href='#'>link</a></td></tr>";
my calculator is out putting something weird with the results I have added it to jsfiddle for you guys to take a quick look at.
If I put 4000 as my principal and 1 year and I put 1% interest it repeats the same values for the principal and the interest, it also skips every other month, but if i put a interest rate of 20% it starts counting down the results of the principal and the interest correctly. Its kinda weird.
I think the problem is with the intr variable but im not quite sure how to fix it.
function totalF(){
var body = document.body;
var tbl = document.createElement('table');
tbl.setAttribute('id', 'results');
var tblBody = document.createElement('tbody');
var tndiv = document.getElementById('tdcontainer');
for (var j = 1; j < payments; j++){
var row = document.createElement('tr');
temp = round(principal);
intr = round((monthly * payments) - principal);
while(temp>0 && intr>0){
if(tndiv != null){
var cell = document.createElement('td');
var cell2 = document.createElement('td');
var cell3 = document.createElement('td');
var ndiv = round(temp);
var intr = round((monthly * payments) - principal);
var monthlyn = j;
cell.innerHTML = ndiv;
cell2.innerHTML = monthlyn;
cell3.innerHTML = intr;
row.appendChild(cell);
row.appendChild(cell2);
row.appendChild(cell3);
j++;
}
temp-=monthly;
intr-=monthly;
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "1");
}
}
}
Timestamp: 17.04.2012 23:13:22
Error: document.loandata.payment is undefined
Source File: http://fiddle.jshell.net/_display/
Line: 86
Use document.getElementById('loandata').payment instead. Do the same for the other form elements or even better use var form = document.getElementById('loandata'); and then form.payment etc.
You also try to access elements in an invalid way at other places. If an element has an ID, use document.getElementById('yourId') to access it, and not document.yourId or document.someElement.yourId.
Besides that, you need to add the missing quote after the semicolon:
<div id="visualization" style="width: 750px;></div>