create calendar by javascript - javascript

I would like to create, tr, td through javascript, and make a simple calendar from day 1 to day 30.
I created an example with console.log() for trying to understand for myself.
When I tried to switch from console.log() to document.getlementById("calendar") for printing on html, it did not print.
The error showed that
calendar.js:3 Uncaught ReferenceError: Invalid left-hand side in
assignment
my understanding with console.log():
for (var i = 1; i <= 5; i++) {
//open tr tag
console.log("<tr>");
for(var i = 1; i <= 30; i++){
var days = "<td>" + i + "</td>";
//print 1 to 31 with td tag
console.log(days);
//if i divide by 7 and remainder is 0
if(i % 7 == 0 || i == 31){
console.log("</tr>");
console.log("<tr>");
}
};
console.log("</tr>");
};
Actual my code with document.getElementById("calendar")
for (var i = 1; i <= 5; i++) {
//open tr tag
document.getElementById("calendar") += "<tr>";
for(var i = 1; i <= 30; i++){
var days = "<td>" + i + "</td>";
//print 1 to 31 with td tag
document.getElementById("calendar") += days;
//if i divide by 7 and remainder is 0
if(i % 7 == 0 || i == 31){
document.getElementById("calendar") += "</tr>";
document.getElementById("calendar") += "<tr>";
}
};
document.getElementById("calendar") += "</tr>";
};
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div >
<table>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
<span id="calendar">
</span>
</table>
</div>
<script src="js/calendar.js" ></script>
</body>
</html>
The error showed that
Uncaught ReferenceError: Invalid left-hand side in assignment

First, you can't have a <span> inside your table where you placed it. A table can only hav a <tr> at this place. But you don't need this span at all, you can just append the string direcly to the table, so I moved the ID to the <table>-tag.
I also used a variable to build all the HTML and after it's all built I inserted it with insertAdjacentHTML() at the end of the table.
var table = document.getElementById("calendar");
var htmlstring = "";
for (var i = 1; i <= 5; i++) {
//open tr tag
htmlstring += "<tr>";
for (var i = 1; i <= 30; i++) {
var days = "<td>" + i + "</td>";
//print 1 to 31 with td tag
htmlstring += days;
//if i divide by 7 and remainder is 0
if (i % 7 == 0 || i == 31) {
htmlstring += "</tr>";
htmlstring += "<tr>";
}
};
htmlstring += "</tr>";
};
//console.log(htmlstring);
table.insertAdjacentHTML('beforeend', htmlstring)
<div>
<table id="calendar">
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</table>
</div>

Related

The multiplication table in javascript should show a table starting from 10 to 19

I am trying to print a multiplication table starting from 10 and up to 19. My temporary result is that it basically the same line that is repeating it self..
I tried to use the table, but it seems that it doesn´t work as desired.. I don´t know how to list all the numbers first from 10 til 19 in a row and in a column and then the product of the rows and columns in the other cells.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onLoad="gangetabellen()">
<div id="tabell"></div>
<script>
function gangetabellen() {
var tall1, tall2, produkt;
var tabell = "<table style='width:500px'>";
for (tall1 = 10; tall1 <= 19; tall1++) {
row += "<tr>";
for (tall2 = 1; tall2 <= 19; tall2++) {
produkt = tall1 * tall2;
tabell += "<td>" + produkt + "</td>";
}
tabell += "</tr>";
}
tabell += "</table>";
document.getElementById("tabell").innerHTML = tabell;
</script>
</body>
</html>
it supposed to show
10 11 12 13 14 15 16 17 18 19
10 100 110
11
12
13
14
15
16
17
18
19
You need to change two things:
Add a } to close the function
Change row += "<tr>"; (undeclared variable) to table += "<tr>";
gangetabellen()
<div id="tabell"></div>
<script>
function gangetabellen() {
var tall1, tall2, produkt;
var tabell = "<table style='width:500px'>";
// If you want a header you should add a for-loop here to add
// a row with tall2
for (tall1 = 10; tall1 <= 19; tall1++) {
tabell += "<tr>";
// If you want a header to the left you should add it here.
for (tall2 = 1; tall2 <= 19; tall2++) {
produkt = tall1 * tall2;
tabell += "<td>" + produkt + "</td>";
}
tabell += "</tr>";
}
tabell += "</table>";
document.getElementById("tabell").innerHTML = tabell;
}
</script>
If you want to display tall1 and tall2 at the edges you need to add code for that (and you can use <th> instead of <td> for "table header". It makes it easier to style the table.

Sorted objects are not passing to string variable in javascript

i tried to do sorting on a html table on my own style using javascript objects sort method. I have a very peculiar problem.
1. I passed all the table data(cell values) to a assigned object.. DONE!!!
2. Then I sorted that object values using object.sort... DONE !!!
3. Now after sorting i want to assign the sorted rows back to the table.. here i got stuck.. i get sorted rows. But when i assign it to a variable inside forloop, it gets assigned to the 'nTable' variable. After completing the loop and when it comes out the 'nTable' variable gets empty.. I tried with string conversions and lot of things. but am not able to find it out. Please help. Thanks in advance. Below is my code
function doSort(ColNo)
{
var objCols =[];
var totalRows = document.getElementById('cities').rows.length;
for (var i=1; i < totalRows; i++)
{
var x = document.getElementById('cities').rows[i].cells;
objCols [i]= {rIndex:i, cellVal:x[ColNo].innerHTML};
}
objCols.sort(function(a, b)
{
var x = a.cellVal.toLowerCase();
var y = b.cellVal.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
var nTable = '<table id="cities" style="border:solid;">';
nTable += '<thead style="text-align:center; background-color:green; color:white">';
nTable += '<tr>';
nTable += '<th onclick="doSort(this.cellIndex)">Indian Cities</th>';
nTable += '<th onclick="doSort(this.cellIndex)">State</th>';
nTable += '</tr>';
nTable += '</thead>';
nTable += '<tbody>';
for (i = 1; i < totalRows; i++)
{
var rowNo = objCols[i].rIndex;
nTable += '<tr>' + document.getElementById('cities').rows[rowNo].innerHTML + '</tr>';
}
alert (nTable);
nTable + ='</tbody>';
nTable + ='</table>';
document.getElementById('cities').innerHTML = "";
document.getElementById('cities').innerHTML = nTable;
}
</script>
</head>
<body>
<table id="cities" style="border:solid;">
<thead style="text-align:center; background-color:green; color:white">
<tr>
<th onclick="doSort(this.cellIndex)">Indian Cities</th>
<th onclick="doSort(this.cellIndex)">State</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coimbatore</td>
<td>Tamilnadu</td>
</tr>
<tr>
<td>Chennai</td>
<td>Tamilnadu</td>
</tr>
<tr>
<td>Madurai</td>
<td>Tamilnadu</td>
</tr>
<tr>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
<tr>
<td>Mumbai</td>
<td>Maharashtra</td>
</tr>
<tr>
<td>Panaji</td>
<td>Goa</td>
</tr>
<tr>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<td>Bangalore</td>
<td>Karnataka</td>
</tr>
<tr>
<td>Calicut</td>
<td>Kerala</td>
</tr>
<tr>
<td>Kolkota</td>
<td>West Bengal</td>
</tr>
</tbody>
</table>
</body>
function doSort(ColNo)
{
var objCols =[];
var totalRows = document.getElementById('cities').rows.length;
for (var i=0; i < totalRows; i++)
{
var x = document.getElementById('cities').rows[i].cells;
objCols [i]= {rIndex:i, cellVal:x[ColNo].innerHTML};
}
objCols.sort(function(a, b)
{
var x = a.cellVal.toLowerCase();
var y = b.cellVal.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
var nTable = '<table id="cities" style="border:solid;">';
nTable += '<thead style="text-align:center; background-color:green; color:white">';
nTable += '<tr>';
nTable += '<th onclick="doSort(this.cellIndex)">Indian Cities</th>';
nTable += '<th onclick="doSort(this.cellIndex)">State</th>';
nTable += '</tr>';
nTable += '</thead>';
nTable += '<tbody>';
for (i = 0; i < totalRows; i++)
{
if(objCols[i]) {
var rowNo = objCols[i].rIndex;
nTable += '<tr>' + document.getElementById('cities').rows[rowNo].innerHTML + '</tr>';
}
}
nTable +='</tbody>';
nTable +='</table>';
document.getElementById('cities').innerHTML = "";
document.getElementById('cities').innerHTML = nTable;
}
Your shorthand operator is like + =. It should be +=
See the changed code. It works and you get your sorted data.
EDIT:
Here's a fiddle. https://jsfiddle.net/f0L0s674/2/

javascript dosnt seem to be working [duplicate]

This question already has answers here:
Why is document.GetElementById returning null [duplicate]
(6 answers)
Closed 8 years ago.
im trying to build a minesweeper in html and the javascript isnt woking
heres my html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"
href = "minesweeper.css" >
</head>
<body>
<table id = "i" ></table>
<script src = "minesweeper.js" ></script>
</body>
</html>
here is the css
td{
border: 2px outset #000000;
width:25px;
height: 25px;
background-color: #cfcfcf;
}
and here is the javascript (minesweeper.js)
var gameBox = document.getElementById("i").innerHTML;
console.log(gameBox);
for ( var i = 0 ; i < 3 ; i++ ) {
gameBox += "<tr>";
console.log(gameBox);
for ( var j = 0 ; j < 3 ; j++ ) {
gameBox += "<td id = '" /*+ i*/ + j + "'></td>";
}
gameBox += "</tr>";
}
and all i get is a blank page
heres a link to the page
http://borisute.com/geshem/2013/mkeller/minsweeper.html
(it has some more code i didnt include b/c its not relevant to the above problem
You still need to put the gamebox onside the html at the end of the script:
var gameBox = document.getElementById("i").innerHTML;
for ( var i = 0 ; i < 3 ; i++ ) {
gameBox += "<tr>";
for ( var j = 0 ; j < 3 ; j++ ) {
gameBox += "<td id = '" + i + j + "'></td>";
}
gameBox += "</tr>";
console.log(gameBox);
}
document.getElementById("i").innerHTML = gameBox;
You gamebox variable is nothing but this at the end of the for loop
<tr><td id = '0'></td><td id = '1'></td><td id = '2'></td></tr><tr><td id = '0'></td><td id = '1'></td><td id = '2'></td></tr><tr><td id = '0'></td><td id = '1'></td><td id = '2'></td></tr>
Also, you are not assigning to any element. You are only creating the variable.

Wrote javascript to dynamically create table. Need help validating user input

I already have a table being created in javascript. It is based off user input and will check to make sure the value entered is a number. But how do I ALSO make it check to make sure the values entered are
higher then 0
and less then 10
<html>
<head>
<title>Homework 1</title>
<script language="javascript" type="text/javascript">
function doWork(){
var rows = document.getElementById("input1").value;
var columns = document.getElementById("input2").value;
//alert(rows);
//alert(columns);
if(isNaN(rows) == true || isNaN(columns) == true){
document.getElementById('tablePlacement').innerHTML = "Input must be integer";
}
else{
var htmlInput = "";
htmlInput += "<table border='1'>";
htmlInput += "<tr>";
//Column Headers
for (i = 0; i <= columns; i++){
htmlInput += ("<td><b>" + i + "</b></td>");
}
htmlInput += "</tr>";
for (i = 1; i <= rows; i++){
htmlInput += ("</br><tr><td><b>" + i + "</b></td>");
for (j = 1; j<= columns; j++){
var multiplyResult = i * j;
htmlInput += ("<td>" + multiplyResult + "</td>");
}
htmlInput += "</tr>";
}
htmlInput += "</table>";
document.getElementById('tablePlacement').innerHTML = htmlInput;
}
};
</script>
</head>
<body>
<form id="input1Form">
Rows: <input type="text" id="input1">
</form>
<form id="input2Form">
Columns: <input type="text" id="input2">
</form>
<button type="button" onclick="doWork()">Enter</button>
<div id="tablePlacement">
</div>
</body>
if(rows <=0 || rows >= 10){
document.getElementById('tablePlacement').innerHTML = "Input rows must be between 1 and 9";
}
if(cols <=0 || cols >= 10){
document.getElementById('tablePlacement').innerHTML = "Input cols must be between 1 and 9";
}

jQuery grid that is tiled

I was hoping some would know how to tile a grid across. I have some code to get started
1 | 2
3 | 4
5 | 6
and in my ajax function
$.ajax({
complete:function(result) {
// in here i want to tile across two sets of td's for each tr
for(var i = 0; i < products.length; i++) {
$('#products').append('<tr><td>' + products[i].Title + '</td></tr>');
}
}
});
<table id="products"></table>
This works whatever the products size is (even or odd).
Hope with comments make it easy to understand
var table_body = '< tbody>';
for(var i = 0; i < products.length; i++) {
if(i%2==0)//if even we open a row
table_body += '<tr>';
//We always put a value
table_body += '<td>' + products[i].Title + '</td>';
if(i%2!=0 || (i==products.length-1))//if odd we close a row
table_body += '</tr>';
}
table_body += '< /tbody>';
$('#products').append(table_body);
Here is a sample code of what you are trying to achieve. You can optimize it to suit your needs. Fiddle
for(var i = 0, y=0; i < 10; i++){
if(y == 0){
$('table').html($('table').html() + '<tr>');
}
$('table').append('<td>' + i + '</td>')
y++;
if( y == 2 ){
y = 0;
$('table').html($('table').html() + '</tr>');
}
}
The simplest solution is to simply not use a table. Chances are if you're arranging data this way, it's not tabular data anyway. I recommend using display: inline-block on your elements and using an HTML element that makes sense for the data you're using, like a ul or li.
This will work for even or odd numbers of elements, fully tested.
var tbl = "";
for (var i = 0; i < products.length; ++i) {
if (i % 2 == 0) tbl += '<tr>';
tbl += '<td>' + products[i].Title + '</td>';
if (i % 2 == 1) tbl += '</tr>';
}
if (i % 2 == 1) tbl += '</tr>';
$("#products").append(tbl);
fiddle

Categories