Please look at this fiddle http://jsfiddle.net/LHsLM/1/.
I am trying to apply height and width to a auto width table using inline css as in the fiddle. But the styles are not applied.
html:
<div id="a"></div>
css:
div {
height:300px;
width:500px;
overflow:auto;
}
js:
var str = ["<table>"];
for (var i = 0; i < 100; i++) {
var tr = "<tr>";
for(var j = 0; j < 100; j++){
tr += "<td style='width:120px;height:40px'>" + j + "</td>";
}
tr+="</tr>";
str.push(tr);
}
str.push("</table>");
document.getElementById('a').innerHTML = str.join('');
Convert width to min-width of your td elements.
Sorry, that is not IE-8 compatible.
This method works for IE8 too:
function tablo(){
var str = ["<table>"];
for (var i = 0; i < 100; i++) {
var tr = "<tr>";
for(var j = 0; j < 100; j++){
tr += "<td><div style='width:120px;height:40px'>" + j + "</div></td>";
}
tr+="</tr>";
str.push(tr);
}
str.push("</table>");
document.getElementById('a').innerHTML = str.join('');
}
Related
The following code works only if the table is already present in the document upon page load. I however want it to apply on a dynamically created table.
Can this be done?
var colNumber=22
for (var i=0; i<colNumber; i++)
{
var thWidth=$("#tbl").find("th:eq("+i+")").width();
var tdWidth=$("#tbl").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#tbl").find("th:eq("+i+")").width(tdWidth);
else
$("#tbl").find("td:eq("+i+")").width(thWidth);
}
The table is created in the following way:
function loadFile(event){
alasql('SELECT * FROM FILE(?,{headers:false})',[event],function(data){
var keys = [];
for (var i = 0; i < data.length; i++) {
for (var categoryid in data[i]) {
var category = data[i][categoryid];
keys.push(categoryid);
}
}
keysConverted = keys.map(foo);
var vMin = Math.min.apply(null, keysConverted);
var vMax = Math.max.apply(null, keysConverted);
var start = vMin-1
var ColNeeded = vMax - vMin+1;
var arrExcel2Table = '<table id="tbl">';
for (var i = 0; i < data.length; i++){
arrExcel2Table = arrExcel2Table + '<tr>';
for (var j = 0; j < ColNeeded; j++){
cellValue = data[i][number2Letter(j+start)];
if (typeof cellValue === "undefined"){
cellValue = '';
}
arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
}
arrExcel2Table = arrExcel2Table + '</tr>';
}
arrExcel2Table = arrExcel2Table + '</table>';
document.getElementById('excel_table').innerHTML = arrExcel2Table;
});
}
Create a function you want to run and add an event from the dynamic element. For example
arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
can be replaced by
arrExcel2Table = arrExcel2Table + '<td onclick="myFunction();">' + cellValue + '</td>';
Above code will call the function you created
myFunction() {
alert();
}
Just create your table, then apply whatever code you want to it :
$('#excel_table').html(arrExcel2Table);
adjustWidth()
function adjustWidth(){
var $tbl = $("#tbl"); // And cache your jQuery objects!! Massive performance boost
for (var i=0; i<colNumber; i++)
{
var $th = $tbl.find("th:eq("+i+")"),
$td = $tbl.find("td:eq("+i+")"),
thWidth = $th.width(),
tdWidth = $td.width();
if (thWidth<tdWidth)
$th.width(tdWidth);
else
$td.width(thWidth);
}
}
I have this function that generates a table where users can input numbers from 0-9.
function table(){
let strHTML = "";
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id=${row}-${col} type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};
I have a function that saves the values from the HTML table in a javascript array.
function saveTable(){
for(let col = 0; col < 9; col++){
for(let row = 0; row < 9; row++){
sudokuArr[col][row] = Number(document.getElementById(col+"-"+row).value);
}
}
};
Finally I have this function which adds two numbers and displays it in a different cell. however whenever this function gets called nothing gets outputted. Not sure what I’m doing wrong?
function calculate(){
var x = sudokuArr[0][0];
var y = sudokuArr[0][8];
var k = x + y;
document.getElementById("0-1").innerHTML = k;
};
The element's id cannot begin with a number because it won't be recognized. Look at my example below: it throws an error with the id that starts with a number.
...an ID should start with a letter for compatibility.
Source: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id
document.querySelector('#c123').innerHTML = 'starts with a letter';
document.querySelector('#123c').innerHTML = 'starts with a number';
<div id="123c"></div>
<div id="c123"></div>
I've made some corrections to your code, you should be on your way.
var pref = 'X';
function table(){
let strHTML = "";
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id=${pref}${row}-${col} type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};
table();
var sudokuArr = [];
function saveTable(){
for(let col = 0; col < 9; col++){
typeof sudokuArr[col] == 'undefined' && (sudokuArr[col] = []);
for(let row = 0; row < 9; row++){
sudokuArr[col][row] = Number(document.getElementById(pref + col+"-"+row).value);
}
}
};
saveTable();
function calculate(){
var x = sudokuArr[0][0];
var y = sudokuArr[0][8];
var k = x + y;
var el = document.getElementById(pref + "0-1");
el.value = k;
};
calculate();
<table id="myTable"></table>
Expanding on Josan's answer. Because you are setting the value of an input field, use document.getElementById("...").value. See snippet below for populating the grid.
Also, I would wrap the id in quotes to make things clearer. <td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>
function table(){
let strHTML = "";
strHTML = "<table>";
for(let row = 0; row< 9; row++){
strHTML += "<tr>";
for (let col = 0; col < 9; col++){
strHTML += `<td><input id="cell${row}-${col}" type="number" min="0" max="9" /></td>`;
}
strHTML += "</tr>";
}
strHTML += "</table>";
document.getElementById('myTable').innerHTML = strHTML;
};
function fill(){
var count = 1;
for(let col = 0; col < 9; col++){
for(let row = 0; row < 9; row++){
document.getElementById(`cell${row}-${col}`).value = count;
count++;
}
}
};
table();
fill();
<table id="myTable"></table>
I would like to create 10 Div-Containers, which contain 10 Div Elements.
Therefor i have written the following code in TypeScript using jquery:
for (var i = 0; i < 10; i++) {
var outsidediv = $('<div id="outsidediv"></div>').appendTo('body')
for (var j = 0; j < 10; j++) {
}
var innerdiv = $('<div class="innerdiv"></div>').appendTo('outsidediv');
}
})
But all it does, is that it creates 10 Div Containers and one Div Element, which isn't inside a container.
I'd really appreciate if someone could take a quick look at this (normally) easy problem.
Thank you very much!
for (var i = 0; i < 10; i++) {
var outsidediv = $('<div id="outsidediv' + i +'" class="outsidediv" />').appendTo('body');
for (var j = 0; j < 10; j++) {
var innerdiv = $('<div class="innerdiv"/>').appendTo('.outsidediv:last-child');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I didn't take a close look at what's going on but what jumps out at me straight away is your 2nd for loop is not doing anything as your 'innerdiv' variable is below where it closes.
for (var i = 0; i < 10; i++) {
$('<div id="outsidediv"></div>').appendTo('body');
for (var j = 0; j < 10; j++) {
$('<div class="innerdiv"</div>').appendTo('outsidediv');
}
}
However fixing this wont work because jquery won't know which 'outsidediv' to append to. You are going to have to think of a different approach. Perhaps just output the html you want?
var html = '';
for (var i = 0; i < 10; i++) {
html += '<div id="outsidediv">';
for (var j = 0; j < 10; j++) {
html += '<div class="innerdiv"</div>';
}
html += '</div>';
}
$(html).appendTo('body');
It's not the shortest way to do it but it should do what you want.
Append the .innerdiv already inside its container #outsidediv in one go by creating a single string of HTML and appending that to the body.
for (var i = 0; i < 10; i++) {
var div = '<div id="outsidediv">' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'</div>';
$('body').append(div);
}
})
So I'm making code for an assignment where I have to make a for loop multiplication table with input variables I've gotten the table to work but I want to input it specifically into a<div id='buffer'></div> and not just using a 'document.write'.
var _buffer = document.getElementById('buffer');
var rows=prompt("enter rows");
var columns=prompt('enter columns');
document.write("<table border='1'>");
for (var a=1; a < rows ; a++) {
document.write("<tr>");
for(var b=1; b< columns; b++) {
document.write("<td>"+a*b+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
I want to use a _buffer.innerHTML instead of the document.write but when I change out the the code it doesn't print the information in a table so I was looking for help and suggestions thanks!
You can initialize the variable (t in the example below), and put all that text into that string, then assign it to innerHTML:
var _buffer = document.getElementById('buffer');
var rows=prompt("enter rows");
var columns=prompt('enter columns');
var t = "<table border='1'>";
for (var a=1; a < rows ; a++) {
t = t + "<tr>";
for(var b=1; b< columns; b++) {
t = t + "<td>"+a*b+"</td>";
}
t = t + "</tr>";
}
t = t + "</table>";
_buffer.innerHTML = t;
I have the following two function in my code, the addValueToSTorage has to read the editable table data and add the values to the localStorage and the populate table reads the values from localStorage and populates the table with the updated values and makes the table non-editable.
function addValueToStorage() {
localStorage.clear();
var table = document.getElementById('table');
var i;
var j;
var rowLength = table.rows.length;
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
value.push(table.rows[i].cells[j].firstChild.data);
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}
populatetable();
}
function populatetable() {
$('#table').empty();
var header = "<tr><th>Select</th><th>Name</th><th>1</th><th>2</th><th>3</th></tr>";
$('#table').append(header);
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (key.substring(0, 5) == "xyz") {
var value = JSON.parse(localStorage.getItem(key));
var xyzvalue = "<tr><td><input type=\"checkbox\" value=" + key + "></td><td><input type=\"text\" value=" + value[0] + "></td><td><input type=\"text\" value=" + value[1] + "</td><td><input type=\"text\" value=" + value[2] + "</td><td><input type=\"text\" value=" + value[3] + "</td></tr>";
$('#table').append(xyzvalue);
}
}
$('#table:input').prop("disabled", true);
}
The addValueToStorage is able to read data from the cells of a normal table, but since my table is editable I have used textboxes inside the table and the addValueToStorage is not able to read the data from the cells and also the table size is completely distorted and is overflowing the div enclosing it because of the textboxes.
Any help on extracting the data and setting the size of the table is greatly appreciated. Thanks in Advance
try changing:
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
value.push(table.rows[i].cells[j].firstChild.data);
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}
to
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
// getAttribute is probably what you're after here
value.push(table.rows[i].cells[j].firstChild.getAttribute('value'));
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}