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).
Related
why i cannot select the first data and the second data when i tested using console.log
This is the table:
var ref = firebase.database().ref("recommendations");
ref.on("value", function(snapshot) {
// console.log(snapshot.val());
var recommendations = snapshot.val();
var keys = Object.keys(recommendations);
console.log(keys);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var title = recommendations[k].title;
var link = recommendations[k].link;
var presenter = recommendations[k].presenter;
// document.getElementById('title').innerHTML = title;
// document.getElementById('presenter').innerHTML = presenter;
// document.getElementById('link').innerHTML = link;
var table = document.getElementById("data");
var tr = document.createElement('tr');
var td1 = tr.appendChild(document.createElement('td'));
var td2= tr.appendChild(document.createElement('td'));
var td3 = tr.appendChild(document.createElement('td'));
var tdEdit = tr.appendChild(document.createElement('td'));
td1.innerHTML = title;
td2.innerHTML = presenter;
td3.innerHTML = link;
tdEdit.innerHTML = "<button id='"+k+"' class='btn btn-default edit'>Edit</button>";
table.appendChild(tr);
}
$(document).ready(function() {
$(".edit").on("click", function(){
console.log(k);
})
});
});
The issue is that you log k which is a reference to inside the loop. So the loop go's key0 key1 key2 and stays key2 because thats the last value of k.
Use something like:
$(document).ready(function() {
$(".edit").on("click", function(){
// From the button perspective this references the Native element.
console.log(this.id); // or $(this).attr("id")
})
});
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);
}
Im making a blackjack game for an assignment and have arrays for leaderboard and cards.
I want to print the leader board like this. CARDS(in individual cells)| TOTAL.
help would be appreciated, thanks
function makeTable(leaderBoard) {
var table = document.createElement('table');
for (var i = 0; i < leaderBoard.length; i++) {
var row = document.createElement('tr');
for (var j = 0; j < leaderBoard[i].length; j++) {
var cell = document.createElement('td');
cell.textContent = leaderBoard[i][j];
row.appendChild(cell);
}
table.appendChild(row);
}
document.getElementById('leaderBoard').innerHTML = table;
}
Maybe the example input isn't in the correct format, but reusing a predefined table and html table functions such as insertRow and insertCell (not necessarily better, but they can be easier on the eye than createElement and append) :
<div id="leaderBoard"><table id=leaderTable></table></div>
function updateleaderboard(leaderBoard) {
var table = document.getElementById('leaderTable');
while(table.rows.length > 0) table.deleteRow(0); //remove prev values, if any
for (var i = 0; i < leaderBoard.length; i++) { //If the function is always used on a winner (no ties), the loop isn't really needed
var row =table.insertRow();
var arrCards = leaderBoard[i++];
var total = row.insertCell();
total.className = 'res';
total.textContent = leaderBoard[i];
arrCards.forEach(function(c,ind){
row.insertCell(ind).textContent = c;
});
}
}
var cards = [['Q','4','5'],19];
updateleaderboard(cards);
Fiddle
function makeTable(leaderBoard) {
var table = document.createElement('table');
var row = document.createElement('tr');
for (var i = 0; i < leaderBoard[0].length; i++) {
var cell = document.createElement('td');
cell.textContent = leaderBoard[0][i];
row.appendChild(cell);
}
var cell = document.createElement('td');
cell.textContent = "Total: " + leaderBoard[1];
row.appendChild(cell);
table.appendChild(row);
document.getElementById('leaderBoard').appendChild(table);
}
var userCards = ["Card 1", "Card 2", "Card 3"];
var userTotal = 10;
makeTable([userCards, userTotal]);
http://jsfiddle.net/25kg3nnq/
I want to insert two new rows when a row's top position exceeds a limit in pixel.
I've tried following code but its not working properly.
I'm adding these two rows for page break and repeating table header purpose.
Following is the print preview of this code ran:
The header should repeat at next page only.
var x = document.getElementsByTagName('tr');
var rowTopVal = 0;
var tIndex = 0;
var deductVal = 0;
var tableId = document.getElementById("testID");
for (var i = 0; i < x.length; i++) {
rowTopVal = x[i].position().top;
rowTopVal = rowTopVal - deductVal;
if (1200 < rowTopVal) {
tIndex = i;
var row = tableId.insertRow(tIndex);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "x";
cell2.innerHTML = "Y";
cell3.innerHTML = "z";
cell4.innerHTML = "P";
cell5.innerHTML = "q";
row.className = 'tableHeaderRepeat';
var row2 = tableId.insertRow(tIndex);
row2.className = 'tableHeaderRepeatBlank';
newRow1Height = parseInt($('.tableHeaderRepeatBlank').css('height'), 10);
newRow2Height = parseInt($('.tableHeaderRepeat').css('height'), 10);
deductVal = deductVal + rowTopVal - newRow1Height - newRow2Height;
}
}
Maybe you could try adding css property to your table headers? See CSS page break properties.
Example:
.tableHeaderRepeat { page-break-before: always; }
It should add a page break before every table header, so you only need to approximately calculate the position to start a new table. I'm not able to test this right now, but maybe it'll help.
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>