I have the following problem:
I have to list several items each with several properties on a web page. The listing is done in two HTML tables. One table for the headers and one table for the items. This separation is needed in order to have possibility to scroll only through the list. (It would be odd to have a scrollbar in the header section). AFAIK there is only one way to do scrolling in a list in HTML is the div overflow property.
The problem is that I need to set the width of columns ( elements) in the whole listing i.e. in header and in the elements list. Here is a simplified example of how it is done now:
<table width="98%">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<div style="width: 100%; height: 300px; overflow-y:scroll">
<table>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
</div>
</table>
The problem is that since the elements in the list may have long (I mean many characters) values the browsers expand the cells even if width attribute is used. Since the header is in a separate its columns will have a different length then the columns of the div's .
So far I have tried to let the browser render the columns in the list and then get those computed styles and apply them to the header's columns but it seems that the header columns do not get exactly that widths. I have had the same problem in other places in the project, but since there the text widths were the constant I used pixels for the widths, different lengths in FF and in IE8, but now the problem is - I think- even more complex.
How can I make the columns have the same width in both tables?
Your example is invalid HTML. I wouldn't recommend using that way at all.
The only way to make all the columns have the same width (without the help of JavaScript) is in fact having them in the same table.
Check out this question. I haven't tested them, but some of the answers look like they provide the functionality you need using only one table element using thead and tbody elements.
The following example uses JavaScript to set the width of header cells:
<head>
<style>
#headerTable {
background-color: #a0f0a0;
font-size: 18px;
font-weight: bold;
}
#headerTable td {
text-align: center;
}
#itemsDiv {
height: 300px;
overflow:auto
}
#itemsTable {
background-color: #e0e0b0;
font-size: 14px;
}
#itemsTable td {
padding: 5px;
text-align: right;
}
</style>
<script>
function ResizeHeaderTable () {
var headerTable = document.getElementById ("headerTable");
var itemsTable = document.getElementById ("itemsTable");
// resize header cells
if (headerTable.rows.length > 0 && itemsTable.rows.length > 0) {
var firstHeaderRow = headerTable.rows[0];
var firstItemsRow = itemsTable.rows[0];
var colsNum = Math.min (firstHeaderRow.cells.length, firstItemsRow.cells.length);
for (var i = 0; i < colsNum; i++) {
var cellWidth = firstItemsRow.cells[i].offsetWidth;
firstHeaderRow.cells[i].style.width = cellWidth + "px";
}
}
// set the width of itemsDiv
var itemsDiv = document.getElementById ("itemsDiv");
itemsDiv.style.width = itemsTable.offsetWidth + "px";
// if the vertical scrollbar of itemsDiv is displayed, itemsDiv must be wider
var scrollWidth = itemsTable.offsetWidth - itemsDiv.clientWidth;
if (scrollWidth > 0) {
itemsDiv.style.width = itemsTable.offsetWidth + scrollWidth + "px";
}
}
</script>
</head>
<body onload="ResizeHeaderTable ()">
<table id="headerTable" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
<div id="itemsDiv">
<table id="itemsTable" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
<tr>
<td>123456789101112</td> <td>2938547</td> <td>34534546</td> <td>42222221134</td>
</tr>
<tr>
<td>123</td> <td>29385</td> <td>34534546444446232</td> <td>42222221</td>
</tr>
</table>
</div>
</body>
When the page has been loaded, the ResizeHeaderTable method is called. The ResizeHandlerTable method uses the offsetWidth property to retrieve and the style.width property to set the width of cells. Finally, it set the width of the div that contains the table for the items.
If you need further details about the offsetWidth property, the following link will be useful:
offsetWidth property
I haven't tested it a lot but this appears to work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
tbody{
width: 100%;
height: 300px;
overflow-y:scroll;
}
--></style>
</head>
<body>
<table width="98%">
<thead>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</table>
</body>
</html>
Update: It only seems to work in Firefox.
Related
I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it?
I have tried this js code with event fadeIn() but not working:
$.fn.slide=function(){
var self=this,kids=self.children()
setInterval(function(){
kids.filter(':hidden').fadeIn()
$(this).appendTo(self)
kids=self.children()
},1000)
return this
}
$(function(){
$('tbody').slide()
})
My html:
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Like first display rows from 1->8 and after that delete it, display from 9->16.
The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setInterval(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Instead if you need just one time slide you need setTimeout like:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setTimeout(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Reference:
setInterval
setTimeout
I want to design a report with HTML and CSS, but I do not know how these forms are designed. Forms such as pay slips that can also be printed. See the pictures I posted below. Please help me. Thank you
You can try to use colspan and rowspan.Here is a simple demo:
<table width="100%">
<tr>
<td colspan="9">first line</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td rowspan="2">8</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid black;
text-align:center;
}
</style>
result:
You can also change width,height,text-align or background for each tr/td.
There are many templates and tutorials you can use on the internet to find the design you are looking for.
The only thing to consider is to use width:100% so your forms become fixed well on the page, also use margin:10px (10px is example) to make sure your report stays inside your page.
HTML Table that is happening now
I'm trying to take this HTLM table with numbers on it the first column added to the second equals the third. some of the sum column are not correct. the correct answer is in the fourth column. I need to use Javascript to change the background color of the rows that are not correct and add in the correct number? This is what I have so far? The attached picture is what is coming up to far.
This picture is what the HTML Table is supposed to look like
Please help
for (var m = 0; m < math.length; m++) {
// math[m][0] = the first element of the m-th array (indices start at 0)
// math[m][1] = the second element of the m-th array
// math[m][2] = the third element of the m-th array
document.write(math[m][0] + ' + ' + math[m][1] + ' = ' + math[m][2] + "<br>" +' Actual answer = '+ (math[m][0]+ math[m][1])+ "<br>");
}
</script>
<table class="mathTable" id="math" style="width:80%"; border="1em";>
<tr>
<th>1st Number</th>
<th>2nd Number</th>
<th>Answer</th>
<th>Actual Answer</th>
</tr>
<tr class='calculation'>
<td>5</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>7</td>
<td>6</td>
<td>13</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>3</td>
<td>13</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>4</td>
<td>7</td>
<td>11</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>3</td>
<td>9</td>
<td>12</td>
<td>12</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>5</td>
<td>12</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>2</td>
<td>6</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>9</td>
<td>14</td>
<td>14</td>
</tr>
<tr class='calculation'>
<td>6</td>
<td>6</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
Thank you
Tables are made up of rows and cells.
It's a good idea to use the thead and tbody tags in your table,
and recommended to separate the css from the body elements
to change the background color: add a class to the element with the chosen color
const tableMath = document.getElementById('table-math');
for (let line=1; line < tableMath.rows.length; line++)
{
if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
{
tableMath.rows[line].cells[3].classList.add('badAnswer')
}
}
table {
border-collapse: collapse;
width: 80%;
margin: 1em;
}
td,th {
border: solid grey 1px;
padding: 5px;
}
th {
background-color: #7fffd5;
}
td {
text-align: center;
}
.badAnswer {
background-color: #f47c6f;
}
<table id="table-math">
<thead>
<tr>
<th> 1st Number </th>
<th> 2nd Number </th>
<th> Answer </th>
<th> Actual Answer </th>
</tr>
</thead>
<tbody>
<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>
<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
</tbody>
</table>
I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.
Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/
The example is as follows:
see : DEMO
or:
<body>
<select>
<option>1</option>
<option>2</option>
<option>......</option>
<option>21</option>
</select>
<div style="overflow:auto;height:50%;width:50%">
<table border="1">
<tr>
<th>Rowno</th>
<th>Savings</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td>$100</td>
<th>t1</th>
</tr>
<tr>
<td>2</td>
<td>$300</td>
<th>t2</th>
</tr>
<tr>
<td>3</td>
<td>$400</td>
<th>t3</th>
</tr>
</tr>
</tr>
<tr>
<td>4</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>5</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>6</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>7</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>8</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>21</td>
<td>$200</td>
<th>t5</th>
</tr>
</table>
</div>
</body>
As the example in the jsfiddle above,assuming that the row 21st. is invisible in the table unless you scroll the scrollbar to the bottom,so if I want to move the the row 21st. of the table to be visible in the table when selecting a rowno in the select options by using js or jquery,could you please tell me how to write this js? thanks.
If you are using Jquery. You can use the hide function. Your would require a class.
$('.trhideclass1').hide();
<tr class="trhideclass1">
<td>......</td>
</tr>