the problemI want to make a sudoku solver and to do that I need to name each cell from 1 to 9 in every row. If you know another way to make this please tell me. Here's the code:
function crear (){
var table = document.getElementById("table");
// enter code here
for (var i = 1; i < 10; i++) {
var showfila = document.createElement("TR");
showfila.setAttribute("id", "myTr" + i);
document.getElementById("table").appendChild(showfila);
for (var a = 1; a < 10; a++) {
var input = document.createElement("INPUT");
input.setAttribute("id", "myInp" + a);
document.getElementById("myTr" + i).appendChild(input);
document.getElementById("myInp" + a).value=a;
}
}
}
I'm assuming the "name" you are talking about for each cell is the name property and also that these cells need to be created (based on your code) so you can do something like this:
EDIT
The name now includes the corresponding row and column. I also added comments so that if this is not what you are looking for, you can refer to them to edit your code correctly.
function createTable(){
var table = document.getElementById("table");
//Loop for rows
for (var i = 1; i < 10; i++) {
//Loop for columns
for (var j = 1; j < 10; j++) {
var cell = document.createElement("TR");
//var i would be the row and var j would be the column
cell.name=i+"-"+j;
table.appendChild(cell);
}
}
}
Related
I have created a dynamic javascript table, where a row is added everytime a button has been pressed, now I have a button which adds additional input fields to certain columns of the last row.
ANYWAY I need to know how many inputs have been added in EACH row, to do some calculations with respective inputs and put the result in the last column of each row.
So, I don't understand how to assign an "id" to each new iput so that it is understandable which row it is and which input (first,second?), so that I could refer to this inputs later...
What I have managed so far, is to assign to all inputs a class, and count how many inputs there are in the whole table and assign id's respectively (1, 2 ..).
But this doesn't satisfy me because I want the count to start anew if it's a different row.
Sorry, I am quite new to this.
function addROW ()
{
var T = document.getElementById ('tbl');
var ro = T.insertRow (-1);
for (var j = 0, J = T.rows [0].cells.length; j < J; j++)
{
var inp = document.createElement ('input');
inp.id = inp.value = 'n' + (T.rows.length - 1) +'_' + j+'_'+'1';
var ce = ro.insertCell (-1);
ce.appendChild (inp);
}
}
function addINPUT ()
{
var T = document.getElementById ('tbl');
x = T.rows.length-1;
var ro = T.insertRow (-1);
for (var j = 0, J = T.rows [0].cells.length; j < J; j++)
{
var inp = document.createElement ('input');
var ce = ro.insertCell (-1);
ce.appendChild (inp);
}
T.rows[x].cells[2].innerHTML = T.rows[x].cells[2].innerHTML + T.rows[x+1].cells[2].innerHTML;
T.rows[x].cells[3].innerHTML = T.rows[x].cells[3].innerHTML + T.rows[x+1].cells[3].innerHTML;
T.rows[x].cells[4].innerHTML = T.rows[x].cells[4].innerHTML + T.rows[x+1].cells[4].innerHTML;
T.deleteRow(x+1);
}
Trying to get my dynamic table to have a button in last column. Have had no luck. Any help much appreciated.
var removeRow=document.createElement("BUTTON");
//Add the data rows.
for (var i = 1; i < data.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < 3; j++) {
var cell = row.insertCell(-1);
if (j==0) {
cell.innerHTML = data[i].userId}
if (j==1) {
cell.innerHTML = data[i].id}
if (j==2) {
cell.innerHTML = data[i].title}
if (j==3) {
cell.appendChild(removeRow)// Not working when replace data[i].field with button variable.
}
}
In your loop, j never gets to 3 (it says j < 3 in your second for statement).
If you change that to j < 4 or j <= 3 it should work.
Apart from that, you are only creating one BUTTON element, which you will be appending to all rows. Every time you append it to a row, it will be removed from the previous row it was on, so you'll still be left with just one button.
I want the title for each column on a table to be'A','B','C' etc, I want to be able to change how many columns there are so I want to use a loop.
Code so far:
JavaScript:
<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
for (var count = 0; count <= Rows; count++) {
var header = table.createTHead(0);
var row = header.insertRow(0);
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
</script>
HTML:
<div id='div1'><table id="dtable"></table></div>
You were creating one row in the header for each column.
Moving the thead creation outside the loop fixed it.
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var header = table.createTHead(0);
var row = header.insertRow(0);
Rows = 4
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
<div id='div1'><table id="dtable"></table></div>
You don't want to create a new row inside of the loop right? Move the head and row creation outside of the loop.
like:
<script>
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
Rows = 4
var header = table.createTHead(0);
var row = header.insertRow(0);
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
</script>
If you want it to look like a table with borders and such you'll have to add css styling but that should print a b c d e
Your problem is that you are creating the header and the row inside your for loop, which means that you will be creating a new row each time, which causes problems with row.insertCell. The first iteration works because you are inserting a cell in the 0th position, but the second iteration of the loop attempts to insert a cell in the 1st position, when a 0th position cell does not exist, hence why it throws an error. Try this and it should work for you:
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable");
var Rows = 4;
var header = table.createTHead(0);
var row = header.insertRow(0);
for (var count = 0; count <= Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
<div id='div1'><table id="dtable"></table></div>
#Dilly,
Use this fiddle... As many other answers for the post - you need to create a row once and columns as many times as you wish... so loop for columns not rows. Which also reminds me to tell you - Please don't use loop count variable name as "Row" that is point of confusion. You should name it - numOfColumns for example.
Thanks to the comment, I added this commentary.
https://jsfiddle.net/shemdani/xjpekb94/1/
document.getElementById('dtable').innerHTML = '';
var table = document.getElementById("dtable")
var row = table.insertRow(0);
Rows = 4
for (var count = 0; count < Rows; count++) {
var character = String.fromCharCode(65 + count);
var cell = row.insertCell(count);
cell.innerHTML =('<b>'+character+'</b>');
}
I've been trying to total a list of die rolls (sum of pairs) in a table using javascript to avoid hard-coding 11 rows in my html page and accessing each row seperately later in the js file to add the values.
So I used a loop and document.writeln() to do this in a more compact way but the output doesn't show the table or anything.
document.writeln("<table border=\"1\"><thead><tr><th>Sum of Dice</th><th>Total Times Rolled</th></tr></thead><tbody>");
for (var i=0; i < 11; i++)
{
document.writeln("<tr><td>2</td><td></td></tr>");
}
document.writeln("</tbody></table>");
The rows shouldn't all start with 2, I only used that number as a test and the second tag in the for loop is for the totals that I already have in an array but my issue is with displaying the table.
Try this:
<script>
var code = "";
function write(){
code += "<table border=\"1\"><tr><th>Sum of Dice</th><th> Total Times Rolled</th></tr>";
for (var i = 0; i < 11; i++){
code += "<tr><td>2</td><td></td></tr>";
}
code += "</table>";
document.body.innerHTML = code;
}
</script>
And don`t forget to put this code to html:
<body onload="write()">
Here you have the result:
I think create table by writeln with whole bunch of HTML text string is generally not a good idea. I would recommend create table dom element via Javascript and append it to the wrapper element.
var headerContent = ['Sum of Dice', 'Total Times Rolled'];
var table = document.createElement('table'),
header = table.createTHead(),
row,
cell;
table.border = 1;
// construct header
row = header.insertRow(0);
for (var i = 0, len = headerContent.length; i < len; i++) {
cell = row.insertCell(i);
cell.innerHTML = headerContent[i];
}
// construct table content
for (var i = 0; i < 11; i++) {
row = table.insertRow(i + 1);
for (var j = 0, len = headerContent.length; j < len; j++) {
cell = row.insertCell(j);
cell.innerHTML = '2';
}
}
// add table element to the dom tree
var wrapper = document.getElementById('wrapper');
wrapper.appendChild(table);
See http://jsfiddle.net/LgyuE/
I need to create a javascript loop that will add the values from a each row (rowCount) of a table column and output the total (QT_BOX * rowCount = prodQty). The rowCountupdates fine, but the prodQty always returns a value of 50. I think I must be overlooking something, but can't seem tot find it...
function updateCounters(){
var gridObject = document.BoxesGrid.getGridObject();
var rowCount = gridObject.getRowCount();
for(var i=0; i <= rowCount; i++){
var prodQty = gridObject.getCellValueByName(i, "QT_BOX");
document.getElementById("QT_READ").value =prodQty;
document.getElementById("QT_BOXES").value = rowCount;
}
}
I don't know what "BoxesGrid" is. But by your code I see that you are setting up the "QT_BOXES" at the same value "rowCount" in every repetition in the loop. So I guess that BoxesGrid is a grid with 50 rows that's why you get allways a total of 50.
You should sum every value in the "for" clause and then set the "QT_BOXES" outside the "for" clause.
function updateCounters(){
var gridObject = document.BoxesGrid.getGridObject();
var rowCount = gridObject.getRowCount();
var tot = 0;
for(var i=0; i <= rowCount; i++){
var prodQty = gridObject.getCellValueByName(i, "QT_BOX");
document.getElementById("QT_READ").value =prodQty;
tot += prodQty;
}
document.getElementById("QT_BOXES").value = tot;
}
In your FOR loop you update the "QT_READ" with the current row's prodQty (or QT_BOX) .. but it is never added to the previous amount, so you will always have your last row's prodQty!
here is what it might look like:
function updateCounters(){
var gridObject = document.BoxesGrid.getGridObject();
var rowCount = gridObject.getRowCount();
for(var i=0; i <= rowCount; i++){
var prodQty = gridObject.getCellValueByName(i, "QT_BOX");
var total = document.getElementById("QT_READ").value;
document.getElementById("QT_READ").value = prodQty + total;
document.getElementById("QT_BOXES").value = rowCount;
}
}