Im using DataTables.Js in my project. I want to add a nested table after each row, but without Ajax or javascript,JUST PURE HTML. below is an example.
#example th {
background: #eeb;
border: solid 1px #eba;
}
#example td {
background: #ddd;
border: solid 1px #4a4;
}
#example table td {
background: #ccf;
border: solid 1px #555;
}
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td colspan="5">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tbody>
<tr>
<td>Full name:</td>
<td>Airi Satou</td>
</tr>
<tr>
<td>Extension number:</td>
<td>5407</td>
</tr>
<tr>
<td>Extra info:</td>
<td>And any further details here (images etc)...</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
</tbody>
</table>
The table renders but the sorting filters don't work. How can I go around this so that the sorting filters work and the details rows always respond to the parent row filtering?
Related
I had this Table, I want when I print the table, should print with a fixed header on each paper, and it's doing that, but the headers does not start on the top of the paper, something going wrong
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;">
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I search about it a lot and I try something like this style:
<style>
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
border-collapse:collapse;
}
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group;
}
tfoot { display:table-footer-group }
}
</style>
It didn't work at all, and I try playing with (page-break-before, page-break-after, page-break-inside) and also nothing happen 😐
<style type="text/css">
#media print{ input {display:none} };
</style>
<input type=button value="print" onclick=javascript:window.print()>
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;" >
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I have fixed header display issue on print's every page. You need to add multiple TR inside TBODY and check the result. If any issue found then let me know
You have to set display of thead: table-header-group
thead {
display: table-header-group
}
Demo:
table {
border-collapse:collapse;
height: 400px;
}
td, th {
text-align: center;
padding: 8px;
}
table, td, th {
border: 1px solid #dddddd;
}
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
}
td, th {
padding: 8px;
}
tr {
page-break-inside:avoid; page-break-after:auto
}
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group; /* <== here */
}
tfoot { display:table-footer-group }
}
<input type="button" value="Print" onclick="window.print()">
<br />
<br />
<table>
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
</tbody>
</table>
This must be a stupid question, but I am not able to figure anything to do about it.
I have a simple HTML table with every element having a property 'data-value'. I need to do some operations based on that, but one column at a time. Hence, I wrote a function which only runs on the first td element of each row. I am getting the rows by running another for each function.
When I use console.log($(this)), I am getting the expected td element from the all the first columns. Now, I want to store the 'data-value' property in another variable and do stuff on it.
$(this).find('td:first-of-type').each(function() {
console.log($(this));
//returns td object
})
});
As seen here, all the td elements are correctly being logged on console.
But when I use jquery to get the property 'data-value' from it, I get undefined.
What could be the error ? Is this the best way to iterate every column's tds property ?
$('#table_canvas tbody tr').each(function() {
$(this).find('td:first-of-type').each(function() {
console.log($(this));
//returns td object
})
});
$('#table_canvas tbody tr').each(function() {
$(this).find('td:first-of-type').each(function() {
console.log($(this).attr('data-value'));
//returns tr object which does not have the 'data-value'property
})
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h2>HTML Table</h2>
<table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;">
<thead>
<tr style="text-align: right;">
<th></th>
<th>first_name</th>
<th>is_staff</th>
<th>last_name</th>
</tr>
<tr>
<th>id</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th hello="hi">1</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>3</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>4</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>5</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>6</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>7</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
</tbody>
</table>
its been awhile i dont use javascript but i think this is work for you vanilla js
just select every second child of every tr tag
document.querySelectorAll('#table_canvas tr td:nth-child(2)').forEach( x => {
console.log(x.dataset.property);
})
Here's a simple way to obtain the data, using vanilla JavaScript:
form array of <tr> elements
map tr array to array of td data-property values
// array of <tr> elements
let trs = Array.from(document.querySelectorAll('#table_canvas tbody tr'));
// array of 'data-property' values
let props = trs.map(tr =>
tr.querySelector('td').dataset.property);
console.log('props:', JSON.stringify(props));
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table id="table_canvas" class="table table--bordered" style="width: 100%; height: 100%;">
<thead>
<tr style="text-align: right;">
<th></th>
<th>first_name</th>
<th>is_staff</th>
<th>last_name</th>
</tr>
<tr>
<th>id</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th hello="hi">1</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>3</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>4</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>5</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>6</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
<tr>
<th>7</th>
<td data-property="1">1</td>
<td data-property="True">True</td>
<td data-property="1">1</td>
</tr>
</tbody>
</table>
This is my table html I am trying to How to include 2 columns under one column header using Jquery I tried this code:
$('#test th.column_Column1').append( $('<th/>', {text : 'HEADER BOth'}) );
But it doesn't give the desired output:
<table class="xrounded_shadowed default footable-loaded footable" id="test">
<thead>
<tr>
<th class="select_checkbox footable-visible footable-first-column" style="width: 40px;"><label><input type="checkbox" onclick="toggleAll(this)" style="float:left;"><i></i></label></th>
<th class="column_Column1 footable-visible">Column1</th>
<th class="column_Column2 footable-visible footable-last-column">Hari</th></tr></thead>
<tbody>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr></tbody></table>
Add two rows instead and the first one should have one single column that spans across all columns
<table>
<thead>
<tr>
<th colSpan="2">Column Header</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
Here's a snippet with more details using jQuery to do it dynamically...
$(function(){
var $thead = $("<thead></thead>");
$thead.append("<tr><th colspan='2'>Column Header</th></tr>");
$thead.append("<tr><th>Column1</th><th>Column2</th></tr>");
$("table").append($thead);
});
table{
width: 100%;
border-collapse: collapse;
border: 1px solid #333;
}
thead{
background-color: #FFEB3B;
}
th, td{
border: 1px solid #333;
padding:4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
</table>
The colSpan and rowSpan attribute is used to do such kind of things.In this case use need to use colSpan to ur <th>. And then set its text-align:center and you will be done
th:nth-child(1) {
text-align: center;
}
th,td{
border:2px solid
}
table{
border-collapse:collapse;
}
<table>
<thead>
<tr>
<th colSpan="2">Column Header</th>
</tr>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tbody>
<tr>
<td>Column 1 Item</td>
<td>Column 2 Item</td>
</tr>
<tr>
<td>Column 1 Item</td>
<td>Column 2 Item</td>
</tr>
</tbody>
</thead>
</table>
I have this little table where I would like to hide some of the details with a simple button... let us say,
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td>revan.dcole#domain.com</td>
<td>(+1) 123 123</td>
<td>D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td>mira.rosenfield#domain.com</td>
<td>(+2) 234 234</td>
<td>Rose Street</td>
</tr>
</tbody>
</table>
I wanted to hide this Email, Phone, and Address fields when the button is clicked, and it will shows the details again if we click it.
The right way to do this is to assign a class to all the info which you want to toggle. This really makes the solution simple.
I have assigned a class sensitive in this example, and toggled it when the button is clicked.
$("button").click(function() {
$(".sensitive").toggle();
})
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
.sensitive {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th class="sensitive">Email</th>
<th class="sensitive">Phone</th>
<th class="sensitive">Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td class="sensitive">revan.dcole#domain.com</td>
<td class="sensitive">(+1) 123 123</td>
<td class="sensitive">D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td class="sensitive">mira.rosenfield#domain.com</td>
<td class="sensitive">(+2) 234 234</td>
<td class="sensitive">Rose Street</td>
</tr>
</tbody>
</table>
You want to hide last three child of td and th , you can select last three child by nth-last-child(-n+3) for more info
How does nth-last-child work
(-n+3)....
-1+3 = 2 --> nth-last-child(2)
-2+3 = 1 --> nth-last-child(1)
-3+3 = 0 --> nth-last-child(0)
$("button").click(function () {
$("tr td:nth-last-child(-n+3),th:nth-last-child(-n+3)").toggle();
});
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide Details</button>
<table>
<thead>
<th>No</th>
<th>Full Name</th>
<th>Nickname</th>
<th>Age</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Revan D. Cole</td>
<td>Revan</td>
<td>22</td>
<td>Male</td>
<td>revan.dcole#domain.com</td>
<td>(+1) 123 123</td>
<td>D Cole Street</td>
</tr>
<tr>
<td>2</td>
<td>Mira Rosenfield</td>
<td>Mira</td>
<td>21</td>
<td>Female</td>
<td>mira.rosenfield#domain.com</td>
<td>(+2) 234 234</td>
<td>Rose Street</td>
</tr>
</tbody>
</table>
I have 2 tables, and they are related, because they are showing the same in different languages. When I press Key down or Key up, the item inside my clicked table moves and scrolls down, but not the related one. How can I make this?
Here is a piece of the html5 code:
<div id="first_table">
<table id="first_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="first_table_container">
<table id="first_text_table">
<tbody id="first_text_table_body">
</tbody>
</table>
</div>
<div id="first_current">
<textarea id="first_current_text" ></textarea>
</div>
</div>
<div id="second_table">
<table id="second_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="second_table_container">
<table id="second_text_table">
<tbody id="second_text_table_body">
</tbody>
</table>
</div>
<div id="second_current">
<textarea id="second_current_text" ></textarea>
</div>
</div>
Here the CSS:
#first_table
{
width:90%;
float: left;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:33px;
margin-bottom: 1%;
}
#second_table
{
width:90%;
float: right;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:30px;
margin-bottom: 1%;
}
#first_table_container, #second_table_container
{
height: 200px;
overflow-y: scroll;
border-style: solid;
border-width: 0px;
border-color: #5e5e5e;
border-bottom-width:1px;
}
And now the javasrcipt (jQuery) code:
if (e.keyCode == 38) { // up
var index = $('#first_text_table_body tr > td').index();
$('#second_text_table_body').scrollTo(index);
}
I've tried scrollTo(), but I can't make it works properly. My goal is, if I press key up, my first list scrolls up and the second list has to scroll up as well.
Thank you!
JSFiddle
HTML
<div id="first_table">
<table id="first_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="first_table_container">
<table id="first_text_table">
<tbody id="first_text_table_body">
<tr>
<td>abc</td>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tr>
</tbody>
</table>
</div>
<div id="first_current">
<textarea id="first_current_text"></textarea>
</div>
</div>
<div id="second_table">
<table id="second_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="second_table_container">
<table id="second_text_table">
<tbody id="second_text_table_body"></tbody>
<tr>
<td>abc</td>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tr>
</table>
</div>
<div id="second_current">
<textarea id="second_current_text"></textarea>
</div>
</div>
CSS
#first_table {
width:45%;
float: left;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:33px;
margin-bottom: 1%;
}
#second_table {
width:45%;
float: right;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:30px;
margin-bottom: 1%;
}
#first_table_container, #second_table_container {
height: 200px;
overflow-y: scroll;
border-style: solid;
border-width: 0px;
border-color: #5e5e5e;
border-bottom-width:1px;
}
JS
$(document).ready(function () {
$(document).keydown(function (e) {
console.log(e);
if (e.keyCode == 38) { //up
$("#first_table_container").animate({
scrollTop: 0
});
$("#second_table_container").animate({
scrollTop: 0
});
}
if (e.keyCode == 40) { //down
$("#first_table_container").animate({
scrollTop: 200
});
$("#second_table_container").animate({
scrollTop: 200
});
}
});
});
I used scrollTop instead, it just need a value of where to go. my solution is just to get you starting. you can continue this to calculate the scrollTop value you want to set on each click..
You should also clean the code.