I am trying to generate random numbers as well as the current minute into a table.
How do I have the script write into the table?
getElementbyClass()?
d = new Date();
var random=Math.floor(Math.random()*60)
document.writeln(random);
var Minutes = d.getMinutes();
document.writeln(Minutes);
You could do something like:
var d = new Date();
var random= Math.floor(Math.random()*60);
var td1 = document.createElement("td");
td1.innerHTML = random;
var Minutes = d.getMinutes();
var td2 = document.createElement("td");
td2.innerHTML = random;
var table = document.getElementById("tblResult");
var row = document.createElement("tr");
row.appendChild(td1);
row.appendChild(td2);
table.appendChild(row);
And int the HTML:
<table id="tblResult">
<tr>
<td>Random</td>
<td>Minutes</td>
</tr>
</table>
Result can be seen in this fiddle
Is there a set number of rows/column in the table? Do you need to update the table in run-time (e.g. will you change the contents in the columns after the page has been loaded)?
If you just want to create a table with those values when loading the page, you could create your table in JavaScript:
var table = document.createElement('table'),
row,
minCol,
ranCol;
function addRow(minutes, rand) {
row = document.createElement('tr');
minCol = document.createElement('td');
ranCol = document.createElement('td');
minCol.innerHTML = minutes;
ranCol.innerHTML = rand;
row.appendChild(minCol);
row.appendChild(ranCol);
table.appendChild(row);
}
for (var i = 0; i < 10; i++) {
addRow((new Date()).getMinutes(), Math.floor(Math.random() * 60));
}
document.body.appendChild(table);
Note that this script must be after the <body> tag for it to work.
If you need to add rows after the page has loaded (e.g. the user clicks a button) just call addRow().
Related
Goal
I am trying to implement a dynamic feature in my table.
Basically, what I want to do is the following:
Problem definition
1) Write 2 number values(PROGNOSE_EXP, PROGNOSE_MAIL) in my two input td's in the table (DONE)
2) In the column HOURS_USED, I want it to take into account, the given numbers inserted into the input fields e.g: (300 / 9) + (900 / 9) = 133 hours used on the given input values, 300 and 900, so instead of hardcoding the number 133 in the picture, it should calculate it.
Variables in calculation
AVG_EXP_TIME = 9
<br>
AVG_MAIL_TIME = 9
<br>
PROGNOSE_EXP = 300
<br>
PROGNOSE_MAIL = 900<br>
HOURS_USED = 133
Code:
var th = document.createElement('th');
th.className = "hours_used";
var text = document.createTextNode("Hours used")
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "prognose_eks";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose exp")
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "prognose_mail";
var text = document.createTextNode("Prognose mail")
th.appendChild(text);
row.appendChild(th);
tbl.appendChild(row);
var tblBody = tbl.createTBody();
var td = document.createElement('td');
td.className = "hoursUsed";
td.innerHTML = "133";
tr.appendChild(td);
var td = document.createElement('td');
td.className = "inputEks";
td.id = "inputEks"
td.innerHTML = "<input type='number' class='inpt_text' name = 'inpt[]' >";
tr.appendChild(td);
var td = document.createElement('td');
td.className = "inputMail";
td.id = "inputMail"
td.innerHTML = "<input type='number' class='inpt_text' name = 'inpt[]' >";
tr.appendChild(td);
I'm not familiar with js, can you give me any tips. So basically I have calendar which generates dynamically. And I need to mark current day for example in "red". You can use my codepen for more detailed information.
When I try to execute value from this table I get the array which looks like this ~>
https://codepen.io/david_jons/pen/aPXeaK
<div id="calendar-container">
<div id="calendar-header">
<span id="calendar-month-year"></span>
</div>
<div id="calendar-dates">
</div>
</div>
JS:
window.onload = function(){
var d = new Date();
var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = d.getMonth();
var year = d.getFullYear();
var first_date = month_name[month] + " " + 1 + " " + year;
var tmp = new Date(first_date).toDateString();
var first_day = tmp.substring(0, 3);
var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var day_no = day_name.indexOf(first_day);
var days = new Date(year, month+1, 0).getDate();
var calendar = get_calendar(day_no, days);
document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
document.getElementById("calendar-dates").appendChild(calendar);
var tr = document.getElementById("calendar-dates");
var tds = tr.getElementsByTagName("td");
var current_date = d.getDate();
}
function get_calendar(day_no, days){
var table = document.createElement('table');
var tr = document.createElement('tr');
//row for the day letters
for(var c=0; c<=6; c++){
var li = document.createElement('li');
li.innerHTML = "SMTWTFS"[c];
tr.appendChild(li);
}
table.appendChild(tr);
//create 2nd row
tr = document.createElement('tr');
var c;
for(c=0; c<=6; c++){
if(c == day_no){
break;
}
var td = document.createElement('td');
td.innerHTML = "";
tr.appendChild(td);
}
var count = 1;
for(; c<=6; c++){
var td = document.createElement('td');
td.innerHTML = count;
count++;
tr.appendChild(td);
}
table.appendChild(tr);
//rest of the date rows
for(var r=3; r<=7; r++){
tr = document.createElement('tr');
for(var c=0; c<=6; c++){
if(count > days){
table.appendChild(tr);
return table;
}
var td = document.createElement('td');
td.innerHTML = count;
count++;
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
You can iterate over an HTML collection using Array.prototype.filter called with the HTML collection as a context.
The following snippet may be of some help:
var cells = document.getElementById("calendar-dates").getElementsByTagName("td");
var current_date = d.getDate();
var matchingElement = Array.prototype.filter.call(cells, function(cell) {
return +current_date === +cell.textContent;
})[0];
matchingElement.style.backgroundColor = 'red';
Basically you got to check if the current date date that you are pasting is the same as today (new Date()).
function isToday(day, month, year){
const today = new Date();
return today.getDate() === day && today.getMonth() === month && today.getFullYear()===year;
}
https://codepen.io/kwiniarski97/pen/magPKV?editors=1111
it can be done in other ways this is just one
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);
}
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.
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>