How do I put randomly generated numbers into a table? - javascript

I need to put 6 randomly generated numbers in a an HTML table, I was wondering what would be the best solution, this is my JS code :
function GenerateNumber(){
var sResultat = "";
var iCompteur;
for(iCompteur=0;iCompteur<=6;iCompteur++)
{
sResultat = Math.round(Math.random()* 18) + 1;
}
}
Would calling them with the AddEventListener work? I need to make it appear everytime I load the page, and of course, the numbers need to be different if I reload the page.
Here is my HTML code : (I put numbers temporarily to test my code and to show where I want them to appear)
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>


function generateNumber() {
var sResultat
var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"]
cells.forEach(function(cell) {
sResultat = Math.round(Math.random() * 18) + 1;
document.getElementsByClassName(cell)[0].innerText = sResultat
})
}
generateNumber()
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class="FOR">
</td>
<td class="DEX">
</td>
<td class="CON">
</td>
<td class="INT">
</td>
<td class="SAG">
</td>
<td class="CHA">
</td>
</tr>
</table>
</div>


function GenerateNumber(){
var tds = document.querySelectorAll('.table td');
return Array.prototype.forEach.call(tds, function(td){
td.innerHTML = Math.round(Math.random()*18) + 1;
});
}
window.onload = GenerateNumber;
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>

Related

Javascript XPath table loop td's

I am trying to create a Chrome Extension that will extract some data from a table. I want to transform the TD's of the TR's in simple lines with each column separated by a pipe | character, ex:
01/01/2020 | XX | 57,43 | |
02/01/2020 | YY | 11,22 | |
Here is a part of it:
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
To iterate over it, I use XPath like this:
function DOMtoString(doc) {
let path_tr = '(//div[#class="contborda"])[4]/table[3]/tbody/tr[position()>1]';
var tr = doc.evaluate(path_tr, doc, null, XPathResult.ANY_TYPE, null);
let alertText = '';
let x = tr.iterateNext();
while (x) {
alertText += x.textContent;
x = tr.iterateNext();
}
return alertText;
}
Here I get the table (ignoring the first TR with column names), but the result is this (just some part of it):
<br> <br> 21/02/2020 <br> Concessionárias<br> <br> 57,43 <br> <br> Visualizar<br> enviar por email <br><br>
I see that XPath is adding BR's on it.
I try to loop over the TD's of these TR's with no success like this:
let path_td = '//td';
var td = tr.evaluate(path_td, tr, null, XPathResult.ANY_TYPE, null);
What is the correct way that I can interact over the TD's and get the raw text of them with no BR's?

Use innerText instead of textContent to avoid line breaks. You can use Document.querySelector() instead of XPath which will make DOM manipulation much easier.
CSS Selectors:
function DOMtoString() {
let lines = [];
let trs = document.querySelectorAll(
'div.contborda > table:nth-of-type(2) > tbody > tr:not(:first-child)'
);
trs.forEach(tr => {
let line = [];
let tds = tr.querySelectorAll('td');
tds.forEach(td => line.push(td.innerText.trim()));
lines.push(line.join('|'));
});
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>
If you have any other reasons you want to stick to using XPath, then you should use dot .// when you want to select nodes relative to nodeContext:
XPath:
function DOMtoString() {
let lines = [];
let path_tr = '//div[#class="contborda"]/table/tbody/tr[position()>1]';
let tr = document.evaluate(path_tr, document, null, XPathResult.ANY_TYPE, null);
let x = tr.iterateNext();
while (x) {
let line = [];
let path_td = './/td';
var td = document.evaluate(path_td, x, null, XPathResult.ANY_TYPE, null);
let y = td.iterateNext();
while (y) {
line.push(y.innerText.trim());
y = td.iterateNext();
}
lines.push(line.join('|'));
x = tr.iterateNext();
}
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>

get value in td with rowspan

I have a table with rowspan as a starting column. The table has a button at the end of each row. When the button is clicked, the corresponding rows values should be retrieved.
$('.get-value').on("click",function(){
var col1val = $(this).parents('table').find('.col1').text();
var col2val = $(this).parents('tr').find('.col2').text();
var col3val = $(this).parents('tr').find('.col3').text();
var col4val = $(this).parents('tr').find('.col4').text();
alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val + " Col4 :" + col4val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="col1"> 1 </td>
<td class="col2"> 2 </td>
<td rowspan="2" class="col3"> 4 </td>
<td class="col4"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="col2"> 3 </td>
<td class="col3"> 6 </td>
<tr>
<td class="col2"> 10 </td>
<td rowspan="3" class="col3"> 13 </td>
<td class="col4"> 14 </td>
<tr>
<td class="col2"> 11 </td>
<td class="col3"> 15 </td>
</tr>
<tr>
<td class="col2"> 12 </td>
<td class="col3"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>
when alert 1 or alert 2 clicked , not all value be retrieved
alert 1 i want result 1,2,3,4,5,6
alert 2 i want result 1,10,11,12,13,14,15,16
learn from here , but not same
help

There are several problems in your code. First you need rows, but you are computing columns. Then you get only parent tr when you should get table.
Here it is, I refactored it for you. Fell free to ask if you don't understand something.
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e=>e)
arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
return arr;
}
$('.get-value').on("click",function(){
var row1val = $(this).parents('table').find('.row1').text();
var row2val = $(this).parents('table').find('.row2').text();
var row3val = $(this).parents('table').find('.row3').text();
var row4val = $(this).parents('table').find('.row4').text();
var row5val = $(this).parents('table').find('.row5').text();
var rowsValues = "Row1 :" + row1val + " Row2 :" + row2val + " Row3 :"+ row3val + " Row4 :" + row4val + " Row5 :" + row4val;
var alert1 = parseAndRemoveDuplicates(row1val + row2val);
var alert2 = parseAndRemoveDuplicates(row3val + row4val + row5val);
console.log(alert1);
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>
here is a better version:
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e=>e)
arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
return arr;
}
function getValuesFromRows(obj, rowclasses) {
var table = $(obj).parents('table');
return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('.get-value').on("click",function(){
var alert1 = getValuesFromRows(this, '.row1,.row2');
var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
console.log(alert1);
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
</tr>
</table>

The following code, amends the first answer of Nelson Teixeira by having each alert provide the numerical values in a sorted order. Also, when you click each alert, now the code provides only the data corresponding to the specific alert, as follows:
function parseAndRemoveDuplicates(arr) {
arr = arr.split(" ").filter(e => e)
arr = arr.filter((v, i) => arr.indexOf(v) == i).sort().join(" ");
return arr;
}
function getValuesFromRows(obj, rowclasses) {
var table = $(obj).parents('table');
return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('#but1').on("click", function() {
var alert1 = getValuesFromRows(this, '.row1,.row2');
console.log(alert1);
});
$('#but2').on("click", function() {
var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
console.log(alert2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" style="text-align:center">
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Col 4 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
<td class="row1"> 2 </td>
<td rowspan="2" class="row1 row2"> 4 </td>
<td class="row1"> 5 </td>
<td rowspan="2"> <button id='but1' class="get-value"> Alert 1 </button> </td>
</tr>
<tr>
<td class="row2"> 3 </td>
<td class="row2"> 6 </td>
<tr>
<td class="row3"> 10 </td>
<td rowspan="3" class="row3 row4 row5"> 13 </td>
<td class="row3"> 14 </td>
<tr>
<td class="row4"> 11 </td>
<td class="row4"> 15 </td>
</tr>
<tr>
<td class="row5"> 12 </td>
<td class="row5"> 16 </td>
<td rowspan="2"> <button id='but2' class="get-value"> Alert 2 </button> </td>
</tr>
</table>
In order to sort the numerical values, the code slightly tweaks parseAndRemoveDuplicates() by sorting the array values before joining them into a string result.
Admittedly, the solution for having each alert provide distinct data, involves less than elegant code, adding a unique id to each button element and then creating a similar function for each to display the corresponding result.

Google Sites HTML Box isn't recognizing CSS or Javascript

So, I've searched around for a bit and found out that some of the CSS won't load in editor mode but will load in previewer mode, however, not all CSS is functioning properly and the Javascript is completely failing.
Here's some html and javascript I tried with the HTML Box:
<table id="Killed" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td>Buffalo</td>
<td align="right">
<span id="Kill_Count1"></span>
</td>
</tr>
<tr>
<td>Camels</td>
<td align="right">
<span id="Kill_Count2"></span>
</td>
</tr>
<tr>
<td>Cattle</td>
<td align="right">
<span id="Kill_Count3"></span>
</td>
</tr>
<tr>
<td>Chickens</td>
<td align="right">
<span id="Kill_Count4"></span>
</td>
</tr>
<tr>
<td>Ducks</td>
<td align="right">
<span id="Kill_Count5"></span>
</td>
</tr>
<tr>
<td>Goats</td>
<td align="right">
<span id="Kill_Count6"></span>
</td>
</tr>
<tr>
<td>Horses</td>
<td align="right">
<span id="Kill_Count7"></span>
</td>
</tr>
<tr>
<td>Pigs</td>
<td align="right">
<span id="Kill_Count8"></span>
</td>
</tr>
<tr>
<td>Sheep</td>
<td align="right">
<span id="Kill_Count9"></span>
</td>
</tr>
<tr>
<td>Turkeys</td>
<td align="right">
<span id="Kill_Count10"></span>
</td>
</tr>
</tbody>
</table><br><br>
<script>
window.addEventListener("load", function () {
function Kill_Count(id,totalDeaths) {
var deathsPerSecond = totalDeaths/365/24/60/60/4;
var deaths = 0, result;
var timer = 1;
setInterval(function() {
deaths = deathsPerSecond*timer;
result = deaths.toFixed();
document.getElementById(id).innerHTML = result;
timer++;
}, 250);
}
var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
killnum = killnum.split(" ");
for (var i = 1; i <= 10; i++) {
var num = i-1;
var temp = killnum[num];
Kill_Count('Kill_Count'+i,Number(temp));
}
});
</script>
What needs to be added? Here's the website https://support.google.com/sites/answer/2500646?hl=en

Interesting problem. I think I may have found a decent solution for you:
First off, Google's HTML Box is auto-generating new id tags for the ids you made. So, id="Kill_Count1" through id="Kill_Count10" is turning into something like id="id_3___"
The first thing I did was change all of the ids to Classes, all set to "Kill_Text":
<span class="Kill_Text"></span>
Next, I wrote some javascript code to collect the elements these classes were in and set their ids back to "Kill_Count1" and such like you had before:
var spans = document.getElementsByClassName("Kill_Text");
// Reset auto-generated ids to Kill_Count#
for (var j = 1; j <= spans.length; j++) {
spans[j-1].id = ("Kill_Count" + j);
}
From there, your code worked just as expected.
Side notes:
At first when I was trying to get javascript to run I had to save the code in the box, save again, then refresh the page. Hopefully this helps if you didn't know already :)
Have you used Chrome developer tools? They are super useful when debugging web pages. [Ctl + Shift + I]
Your code currently sets 10 timers doing pretty much the same actions on individual spans. It would be more efficient to have one timer doing 10 actions (1 on each span)
For Reference:
Here's the final code I used in the HTML box:
<table id="Killed" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td>Buffalo</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Camels</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Cattle</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Chickens</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Ducks</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Goats</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Horses</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Pigs</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Sheep</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Turkeys</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
</tbody>
</table>
<script>
function Kill_Count(id,totalDeaths) {
var deathsPerSecond = totalDeaths/365/24/60/60/4;
var deaths = 0, result;
var timer = 1;
setInterval(function() {
deaths = deathsPerSecond*timer;
result = deaths.toFixed();
document.getElementById(id).innerHTML = result;
timer++;
}, 250);
}
var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
killnum = killnum.split(" ");
var spans = document.getElementsByClassName("Kill_Text");
// Reset auto-generated ids to Kill_Count#
for (var j = 1; j <= spans.length; j++) {
spans[j-1].id = ("Kill_Count" + j);
}
for (var i = 1; i <= 10; i++) {
var num = i-1;
var temp = killnum[num];
Kill_Count('Kill_Count'+i,Number(temp));
}
</script>

Subtotal Group using jquery

Fiddle
<table border="1" class="cssTable">
<tr id="trGroup">
<td>
Black, Total <asp:Label ID="lblCount" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="cssTd">
A
</td>
</tr>
<tr>
<td class="cssTd">
B
</td>
</tr>
<tr id="trGroup">
<td>
White, Total <asp:Label ID="lblCount" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="cssTd">
X
</td>
</tr>
<tr>
<td class="cssTd">
Y
</td>
</tr>
<tr>
<td class="cssTd">
Z
</td>
</tr>
</table>
I have to subtotal group.
means in above example Black have 2 Child
and White have 3 child

Change the id='trGroup' to class='trGroup' (you're supposed to have unique id's), and then use the nextUntil method.
$('.trGroup').each(function () {
var $this = $(this),
subTotal = $this.nextUntil('.trGroup').length;
$this.text($this.text() + subTotal);
});
DEMO

$('#trGroup').each(function() {
var len;
len = $(this).nextUntil('tr#trGroup').length
// i think this **len** is what you require
})

How to show 6 more rows and hide the previous 5 rows of a table using javascript?

I want to only display the first 6 rows of the table and when I press a button, the previous six will be hidden and the next six will be shown.
Here is my javascript that shows the first 6 tables:
function setInnerHTML(){
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
if(userBoxList.size()>6){%>
document.getElementById('down').disabled = false;
document.getElementById('page').value = counter + 1;
<% size = 6;
}
else{
size = userBoxList.size();
}
for(x=0; x < size; x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
document.getElementById(origID).onclick = changeColor;
var items = document.getElementById(origID).getElementsByTagName("td");
items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB";
origID++;
<%}
%>
}
My HTML code:
<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>

It's not good practice to mix logic with view. Try to use already existing components to display table.
You could choose displayTag: http://www.displaytag.org/1.2/ or datatables https://datatables.net/ or many others.
Use server side processing with ajax call to display next records.

I solved this problem by creating the table dynamically just using
> document.getElementById.style.display = "table-row" and
> document.getElementById.style.display = "none"
to hide and show the TR.

Categories

Resources