I want to hide if the hobby doesn't have value (empty). But if the hobby has value is still show. How to condition it? I try using jQuery.
$("tr:last-child td:last-child").css("font-weight","bold")
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You can hide the .parent() tr if the .text() of the td is blank.
$("tr:last-child td:last-child").each(function(index, td) {
if($(td).text() === ""){
$(td).parent().hide();
}
});
table {
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
tr:last-child td:last-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You need to use text() to get the text of td
$("tr:last-child td:last-child").each(function(index,element){
$(element).css("font-weight","bold");
});
$("tr:last-child td:last-child").each(function(index,element){
if($.trim($(element).text()).length == 0){
$(element).parent().hide();
}
});
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
change this:
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
to:
if($("tr:last-child td:last-child").text().length < 1){
$("tr:last-child").hide()
}
Related
I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that?
How can i check if a td is empty?
You can use :empty selector:
Demo:
//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());
table, th, td {
border: 1px solid black;
}
table tr > td:empty {
background-color: yellow;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>May</td>
<td> </td>
</tr>
</table>
You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.
Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.
$(document).ready(function () {
$("table td").each(function (index, eachCell) {
if ($(eachCell).html().trim().length === 0) {
$(eachCell).addClass("empty-cell");
}
});
});
.empty-cell {
background-color: red;
}
td {
border: 1px solid #ddd;
padding: 5px;
}
td:empty {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td> </td>
</tr>
</tbody>
</table>
I would like to behind row2by default and by clicking tables,it will show itself.
When I try my work like below,row2 is behind. but the shape of tables distorted.
I would like to align tables and behind row2 by deafault.
How can I fix it ?
Why this table distorted?
Thanks
$(function() {
$("table").click(function() {
$("table tr:eq(1)").toggleClass('show');
});
});
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}
tr:nth-child(2):not([class]) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
If you want to toggle the row, I suggest you have a concept of "hide", rather than "show".
Also, get rid of the second row header. Not sure why you need it, if you are spanning 2 rows.
$(() => {
$('table').click(function(e) {
$(this).find('tr:eq(1)').toggleClass('hide');
});
});
table, th, td {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0.25em;
}
th {
cursor: pointer
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody>
<tr>
<th rowspan="2">Header</th>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="hide">
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</tbody>
</table>
Below code removes the row if it contains an empty cell in the 3rd column.
It makes use of Jquery's fadeOut-method for a nice effect.
Thing is that I can't get the code working without the faeOut method.
I tried $(this).remove(); but that does not work.
function TT(){
var A = 3;
$('table tbody tr td:nth-child(' + A + ')').each(function(index){
var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
if (cellValue.length === 0){
$(this).parents('tr').fadeOut(function(){
$(this).remove();
});
}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
Multiple times you are querying “table” .which is not required. Only the first loop to iterate through all 3rd column elements is sufficient to find out if the cell is empty and to remove the complete row.
function TT(){
var A = 4;
$('table tbody tr td:nth-child(' + A + ')')
.each(function(index){
if($(this).text()=="" ) {$(this).parent().remove();}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td>D6</td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
No need to use .each() you can just use .filter()
function TT(){
var A = 3;
$('table tbody tr').filter(function(){
return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces
}).remove();
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
Note: parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start
from the <tr> not from the <td>
Another note: :nth-child(index) index starts from 1 .. and :eq(index) starts from 0
I have tried searching, but I am stuck.
Basically I am making a jeopardy game board; which I created using a table. I would like to change the background-color of the td after it has been clicked on. The challenge I am facing is that (1) I am using a link to direct to the question/answer (yes, I know this could be done other ways, but I need to learn more to advance and I am working on that); (2) After searching for answers, I can't seem to get it to work with the code I have.
Here is my [JSFiddle]https://jsfiddle.net/hLyauL5a/)
Html:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff </th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
</tr>
</tbody>
</table>
CSS:
jQuery code:
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
I would appreciate any help!
I see two problems. One, you have not included jquery or your javascript file in your html. Your jsfiddle does not have jquery loaded.
Two, assuming the above was just a problem getting your question across on Stack Overflow, you haven't waited for the document to load before attaching event listeners. The selector tries to select something that isn't there yet, and nothing is attached. What you need is:
$(document).on('ready', function(){
$("table tr td").click(function(e) {
$(this).css("background", "#626975");
});
});
Working example:
$(()=> {
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
});
body {
cursor: pointer;
}
/*gameboard*/
table {
width: 100%;
border-collapse: collapse;
}
tr {
background: #1f293a;
color: #47ba04;
}
th {
background: #1f293a;
color: white;
font-weight: bold;
min-width: 200px;
}
td {
color: #47ba04;
background: #1f293a;
min-width: 100px;
height: 130px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
a {
color: #47ba04;
text-decoration: none;
}
/* For the question pages*/
#question,
#answers {
width: 100%;
height: 800px;
border: 1px solid black;
background-color: #1f293a;
color: white;
font-weight: bold;
}
div.question h2,
div.answers h2 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
</tr>
<tr>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
</tr>
<tr>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
</tr>
<tr>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
</tr>
<tr>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
</tr>
</tbody>
</table>
You could launch the links in a new window by adding target="_blank" attribute to your anchor tags:
<td>100</td>
$('a').click(function(e){
e.preventDefault();
$(this).parent().css('background-color','blue');
});
So,using JQuery, if you click on an tag, don't jump on whatever link it is, you prevent the default event, then you get its parent which is the element and you add the css style as shown. Here is the html that I used as an example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td >Table</td>
<td bgcolor="#00FF00">$100</td>
</tr>
Generally, a hyperlinks like <a herf="" onclick="">contain two events: onclick and herf. The order of execution --- 'onclick' in front of 'herf'. so making onclick method return 'false' if you want to page can't jump on whatever link it is when you click hyperlink. Code is as follows.
$(function(){
$("a").on("click",function(){
$(this).css("background", "#626975");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</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.