UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> Creating A Table Based Off Array Values    
 
   
toons
post Feb 26 2015, 10:39 AM
Post#1



Posts: 461
Joined: 21-April 07



Im trying to create a dynamic table that pulls values from an array, and plugs each element from the array in to its own individual cell. It also has to limit the number of cells per row to 4 (so basically 4 columns in the table). The first version below plugs each value in to a cell, but its only 1 cell per row.

CODE
var foodTable = "";
var strTemp;


foodTable = "<table border=1 bgcolor=gray id='arrayTable'>";

for (i=0;i<wordCount.length;i++)
    {
    strTemp = "<tr><td>" + wordCount[i] + "</td></tr><tr><td>";
    foodTable = foodTable + strTemp;
    }

foodTable = foodTable + "</td></tr></table>";



In this version I am trying to have it do loops based off of a column and row limit variable, and plug the array elements in based on that sections loop integer. Something in it is breaking and causing it not to run. Im quite new to javascript, sadly. Can anyone troubleshoot this and see where I went wrong please? I appreciate the help

CODE
var table = document.getElementById("arrayTable");
var colLimit = 4;
var rowLimit = wordCount / 4;
var foodTable = "";
var strTemp;


foodTable = "<table border=1 bgcolor=gray id='arrayTable'>";

for (i=0;i<rowLimit;i++)
    {
    var row = table.insertRow(i);
    for (j=0;j<colLimit;j++)
        {
        var cell[j] = row.insertCell(j);
        for (k=0;k<wordCount.length;k++)
            {
        
            cell[j].innerHTML = wordCount[k];
            foodTable = foodTable + strTemp;
            }
        }
    }

foodTable = foodTable + "</td></tr></table>";
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 12:05 PM
Post#2


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


I think I would go back to your original code:
CODE
var foodTable = "";
var strTemp;

foodTable = "<table border=1 bgcolor=gray id='arrayTable'>";

for (i=0;i<wordCount.length;i++) {
  strTemp = strTemp + "<td>" + wordCount[i] + "</td>";
  if (i % 4 == 0) {
    strTemp = "<tr>" + strTemp + "</tr>";
    foodTable = foodTable + strTemp;
    strTemp = "";
  }
}

foodTable = foodTable + "</table>";

The above is aircode, so no guarantees it'll work straight off!

hth,

d
Go to the top of the page
 
toons
post Feb 26 2015, 12:24 PM
Post#3



Posts: 461
Joined: 21-April 07



its close to working. I changed the cell line to

CODE
(i % 4 == 3)


since it was showing a word in the first cell, then going right to the next row, leaving a gap of where 3 more cells could have gone in the first row. the issue now is that there are 2 more words that should be appearing in 1 last row, but they arent. so it's cutting off before the last row. there would ultimately be 2 empty cells in the last row also, and I need to have it say NULL in those cells. I dont even know what to look up on google to try and find a fix for this
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 12:25 PM
Post#4


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


Here, this might work a little better:
CODE
var foodTable = "";
var strTemp = "";
foodTable = "<table border=1 bgcolor=gray id='arrayTable'>\n";
for (i=0;i<wordCount.length;i++) {
  strTemp = strTemp + "<td>" + wordCount[i] + "</td>";
  if ((i+1) % 4 == 0) {
    strTemp = "<tr>" + strTemp + "</tr>\n";
    foodTable = foodTable + strTemp;
    strTemp = "";
  }
}
foodTable = foodTable + strTemp;
foodTable = foodTable + "</table>";
console.log(foodTable);


hth,

d
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 12:28 PM
Post#5


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


For the last 2 empty cells you're going to have to work out some logic with the wordCount.length to make it a multiple of 4, then use that as the upper bound of the loop, but make sure you don't access those extra elements of the array (which don't exist)
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 12:43 PM
Post#6


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


Try this version to deal with empty cells:
CODE
var foodTable = "";
var strTemp = "";
var ubound = 0;
ubound = wordCount.length;
while ((ubound + 1) % 4 != 0) {
  ubound++;
}
foodTable = "<table border=1 bgcolor=gray id='arrayTable'>\n";
for (i=0;i<ubound;i++) {
  strTemp = strTemp + "<td>" + (i < wordCount.length ? wordCount[i] : "") + "</td>";
  if ((i+1) % 4 == 0) {
    strTemp = "<tr>" + strTemp + "</tr>\n";
    foodTable = foodTable + strTemp;
    strTemp = "";
  }
}
foodTable = foodTable + strTemp;
foodTable = foodTable + "\n</table>";
console.log(foodTable);


hth,

d
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 12:46 PM
Post#7


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


Sorry, I just noticed I left the console.log statements in there. You can get rid of those.

d
Go to the top of the page
 
toons
post Feb 26 2015, 12:53 PM
Post#8



Posts: 461
Joined: 21-April 07



thanks again! Ill play with it to finish it up.
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 01:09 PM
Post#9


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


yw.gif

It seemed to work for me with an array of 10 elements.

Let us know your final solution.

thumbup.gif

d
Go to the top of the page
 
cheekybuddha
post Feb 26 2015, 03:20 PM
Post#10


UtterAccess VIP
Posts: 9,281
Joined: 6-December 03
From: Telegraph Hill


Oops! Just noticed that the last row isn't wrapped in row tags. This should do it:
CODE
var foodTable = "";
var strTemp = "";
var ubound = 0;
ubound = wordCount.length;
while ((ubound + 1) % 4 != 0) {
  ubound++;
}
foodTable = "<table border=1 bgcolor=gray id='arrayTable'>\n";
for (i=0;i<ubound;i++) {
  strTemp = strTemp + "<td>" + (i < wordCount.length ? wordCount[i] : "") + "</td>";
  if ((i+1) % 4 == 0) {
    strTemp = "  <tr>" + strTemp + "</tr>\n";
    foodTable = foodTable + strTemp;
    strTemp = "";
  }
}
foodTable = foodTable + "  <tr>" + strTemp + "</tr>\n";
foodTable = foodTable + "</table>";


thumbup.gif

d
Go to the top of the page
 


Custom Search
RSSSearch   Top   Lo-Fi    18th December 2017 - 05:51 AM