How to select items using a input checkbox? - javascript

This is my code snippet, I want to display the difference of two selected columns and create a new table with columns selected and difference along as a column. I am not getting how can I select table columns with the help of checkbox (basically bind the checkbox with table columns). I cant find anything on Stack Overflow or any other site for the reference.
Edit: I have added the JS code for getting the column data corresponding to that particular header, right now I am hard coding it to header "Three". How can I pick the particular column data bind to the input checkbox clicked?
columnTh = $("table th:contains('Three')");
columnIndex = columnTh.index() + 1;
let arr = [];
alert(columnIndex)
arr = $('table tr td:nth-child(' + columnIndex + ')').text()
alert(arr)
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<th>One</th>
<th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
<th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
<th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
<th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>2</td>
<td>93</td>
<td>74</td>
<td>85</td>
</tr>
<tr>
<td>21</td>
<td>32</td>
<td>93</td>
<td>24</td>
<td>15</td>
</tr>
<tr>
<td>91</td>
<td>72</td>
<td>13</td>
<td>14</td>
<td>85</td>
</tr>
<tr>
<td>411</td>
<td>422</td>
<td>423</td>
<td>144</td>
<td>145</td>
</tr>
<tr>
<td>151</td>
<td>522</td>
<td>93</td>
<td>54</td>
<td>515</td>
</tr>
<tr>
<td>610</td>
<td>621</td>
<td>363</td>
<td>464</td>
<td>65</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>13</td>
<td>41</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>120</td>
<td>143</td>
<td>214</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
</tbody>
</table>
</div>


I don't know how you want to display the difference, but this might get you started:
const table = document.getElementById("main-table"),
checkboxes = table.querySelectorAll('th > input[type="checkbox"]');
let columns = {};
for(let i = 0; i < checkboxes.length; i++)
{
checkboxes[i].addEventListener("input", onInput);
}
function onInput(e)
{
const input = e.target,
column = input.parentNode.cellIndex,
tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');
if (input.checked)
{
let list = [];
for(let i = 0; i < tds.length; i++)
{
list[list.length] = tds[i].textContent;
}
columns[column] = list;
}
else
{
delete columns[column];
}
if (Object.keys(columns).length > 1)
showDifference();
else
table.classList.remove("result");
}
function showDifference()
{
table.classList.add("result");
let cells = table.getElementsByClassName("result"),
trs = table.querySelectorAll("tr");
if (!cells.length)
{
cells = [];
for(let i = 0, cell; i < trs.length; i++)
{
cell = document.createElement(i ? "td" : "th");
if (!i)
cell.textContent = "Results";
cell.className = "result";
cells[cells.length] = cell;
trs[i].appendChild(cell);
}
}
let dif = [];
for(let r in columns)
{
for(let i = 0; i < columns[r].length; i++)
{
if (dif[i] === undefined)
dif[i] = [];
dif[i][dif[i].length] = columns[r][i];
}
}
for(let i = 0; i < dif.length; i++)
{
cells[i+1].textContent = dif[i];
}
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
.main-table:not(.result) th.result,
.main-table:not(.result) td.result
{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<th>One</th>
<th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
<th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
<th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
<th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>2</td>
<td>93</td>
<td>74</td>
<td>85</td>
</tr>
<tr>
<td>21</td>
<td>32</td>
<td>93</td>
<td>24</td>
<td>15</td>
</tr>
<tr>
<td>91</td>
<td>72</td>
<td>13</td>
<td>14</td>
<td>85</td>
</tr>
<tr>
<td>411</td>
<td>422</td>
<td>423</td>
<td>144</td>
<td>145</td>
</tr>
<tr>
<td>151</td>
<td>522</td>
<td>93</td>
<td>54</td>
<td>515</td>
</tr>
<tr>
<td>610</td>
<td>621</td>
<td>363</td>
<td>464</td>
<td>65</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>13</td>
<td>41</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>120</td>
<td>143</td>
<td>214</td>
<td>5</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
</tr>
</tbody>
</table>
</div>

Related

Why doesn't my click handler show the correct table element?

I have JavaScript code which on button click shows its table. I have 4 buttons (and tables, obviously). Probably there will be more, so making function to each one of them will be bad idea. That being said, I made this code below to slightly minimize the amount of code. But, it doesn't work, and I don't quite understand why.
document.addEventListener('DOMContentLoaded', function() {
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab3 = document.getElementById('tab3');
const tab4 = document.getElementById('tab4');
const currentTable = ".table";
const tables = Array.from(document.querySelectorAll(currentTable))
const table1 = document.querySelector('.table1');
const table2 = document.querySelector('.table2');
const table3 = document.querySelector('.table3');
const table4 = document.querySelector('.table4');
//this doesnt work
function showTable(e) {
const target = e.target;
if (!target || !target.matches(currentTable)) {
return;
}
tables.forEach(elem => elem.classList.remove('active'));
tables.forEach(elem => elem.classList.remove('op'));
e.target.classList.add('active');
setTimeout(function() {
e.target.classList.add('op');
}, 20);
};
tab1.addEventListener('click', showTable(table1));
tab2.addEventListener('click', showTable(table2));
tab3.addEventListener('click', showTable(table3));
tab4.addEventListener('click', showTable(table4));
});
//this one for buttons
document.addEventListener('DOMContentLoaded', function() {
const selector = '.table_option';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('.table-nav');
function makeActive(e) {
const target = e.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
e.target.classList.add('active');
};
navigation.addEventListener('click', makeActive);
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>
Where am I wrong? Can someone point me to the problem I am facing?

I like to take a simple index-based approach to things like this. If that doesn't suit, you could add indices to the tables using data attributes which correspond to tab index.
Some other tips...
You were creating event listeners in every call of showTable(). That would result in a pile of event handlers you don't want.
You were using a rather roundabout way to collect elements (with Array.from(). That's not needed.
Multiple classes can be added and removed as a list.
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.table_option');
const tables = document.querySelectorAll('.table');
tabs.forEach(tab => {
tab.addEventListener('click', e => {
const tabEl = e.currentTarget.parentNode;
const tabIndex = [...tabEl.parentNode.children].indexOf(tabEl);
showTable(tabIndex);
});
});
const showTable = index => {
tables.forEach(elem => elem.classList.remove('active', 'op'));
tables[index].classList.add('active');
setTimeout(() => {
tables[index].classList.add('op');
}, 20);
tabs.forEach(elem => elem.classList.remove('active', 'op'));
tabs[index].classList.add('active');
}
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>

:nth-child(even) selector by class with specific elements [duplicate]

This question already has answers here:
Excluding an element from nth-child pattern
(5 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have a table that has a light gray background for the even rows and white for the odd ones. it works perfectly by using .tr:nth-child(even) {}
HTML
<table>
<tr></tr>
<tr class="hidden"></tr>
<tr class="hidden"></tr>
<tr></tr>
</table>
CSS
tbody tr:nth-of-type(even) {
background-color: var(--bg);
}
I made a search field that filters table rows by adding hidden class for tr elements that not match after that the tr:nth-child(even) doesn't work.
I tried to add search-result class on the elements that match and then I made tr:nth-of-type(even) { .... }, also that not worked.
Is there any way that I can do that? for example, a way to select even elements by class?

Fixed version of the codepen in the comments using a variant of the proof of concept I have at the bottom. Count up indexes to check if even, excluding elements with display:none, done every update. This may need to be optimized for very large tables.
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("input");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
//let table = document.getElementsByTagName('table')[0]
(function(){
let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
el.style.display !== 'none' && i++ % 2 === 0 ? el.classList.add('even') : el.classList.remove('even'))
})()
}
* {
box-sizing: border-box;
}
#input {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#table {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
}
#table tr {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #fff;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
}
#table th, #table td {
text-align: left;
padding: 12px;
}
#table tr :not(td) {
background-color: #424242;
color: white;
}
#table tr:not(.even) {
background-color: #eee!important;
}
<input type="text" id="input" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="table">
<tr>
<th style="width:60%;">Name</th>
<th style="width:40%;">Age</th>
</tr>
<tr>
<td>Adam</td>
<td>22</td>
</tr>
<tr>
<td>malik</td>
<td>40</td>
</tr>
<tr>
<td>Asal</td>
<td>32</td>
</tr>
<tr>
<td>Asal</td>
<td>26</td>
</tr>
<tr>
<td>Asali</td>
<td>40</td>
</tr>
<tr>
<td>malik</td>
<td>40</td>
</tr>
<tr>
<td>maaaalik</td>
<td>40</td>
</tr>
</table>
select non-hidden and use counter to find even. add class.
let table = document.getElementsByTagName('table')[0]
let i = 0
table.querySelectorAll('tr:not(.hidden)').forEach(el =>
i++ % 2 === 0 && el.classList.add('even'))
.even {
background-color: red;
}
.hidden {
opacity: 0.2;
}
<table>
<tr>
<td>1</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr class="hidden">
<td>2</td>
</tr>
<tr class="hidden">
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>

How to disable or hide carousel next/prev icons using jquery

Im using bootstrap4 carousel and i using carousel inside table.. i just create table pagination using carousel next/prev icon. now i struggle to create hide previous icon when we are in first page in carousel and show only next icon, then when we go to second page the prev icon wants to show.
same as well when we go last page the next icon wants to hide and show only prev icon.
any new approaches or suggestions please tell me..
here is my tried code..
$(document).ready(function() {
$("#myCarousel").carousel({
interval: false
});
});
pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for (var i = 0; i < pageCount; i++) {
$("#pagin").append('<li>' + (i + 1) + '</li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("<").html(">").click(function() {
startPage -= 3
incremSlide -= 3
slide();
});
prev.hide();
var next = $("<li/>").addClass("<").html(">").click(function() {
startPage += 3;
incremSlide += 3;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens) {
$("#pagin li").hide();
for (t = startPage; t < incremSlide; t++) {
$("#pagin li").eq(t + 1).show();
}
if (startPage == 0) {
next.show();
prev.hide();
} else if (numberPage == totalSlidepPage) {
next.hide();
prev.show();
} else {
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
$('.carousel-control-prev').click(function(e) {
var currentPage = parseInt($("#pagin li a.current").text());
var prevPage = currentPage - 1;
if (prevPage < pageSize) {
showPage(prevPage);
var currentObj = $("#pagin li a.current");
$("#pagin li a.current").parent().prev().find('a').addClass('current');
currentObj[0].className = "";
} else {
e.preventDefault();
}
});
$('.carousel-control-next').click(function(e) {
var currentPage = parseInt($("#pagin li a.current").text());
var nextPage = currentPage + 1;
if (nextPage < pageSize) {
showPage(nextPage);
$("#pagin li a.current").parent().next().find('a').addClass('current');
var currentObj = $("#pagin li a.current");
currentObj[0].className = "";
} else {
e.preventDefault();
}
});
// tried another way
function carouselPage() {
var checkitem = function() {
var $this;
$this = $("#myCarousel");
if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#myCarousel").on("slid.bs.carousel", "", checkitem);
};
#preModal .viewing {
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
margin: 0 auto;
}
input[type=checkbox] {
/* left: 23px; */
width: 15px;
}
.carousel-control-prev {
height: fit-content;
width: fit-content;
top: 40%;
left: 10px;
}
.carousel-control-next {
right: 10px;
height: fit-content;
width: fit-content;
top: 40%;
}
.contd {
/* width: 160%;
right: 30%; */
width: 132%;
right: 16%;
}
.predefineModal {
padding-bottom: 0px;
padding-top: 0px;
}
.current,
.carousel_li,
.carousel_a {
display: none;
}
/* .contd:hover .carousel-control-next-icon {
display: block;
}
.contd:hover .carousel-control-prev-icon {
display: block;
} */
.second {
position: relative;
right: 6%;
}
.modal-footer {
max-width: 86%;
}
.indexBtn {
color: #fff;
background-color: #680f79;
border-color: #680f79;
box-shadow: none;
display: inline-block;
font-weight: 400;
border: 1px solid transparent;
padding: 3px .75rem;
font-size: 1rem;
border-radius: .25rem;
}
.indexBtn:hover {
background-color: #c178cf;
}
.diss {
color: #5f5e5e;
background-color: #cecece;
border-color: #cecece;
}
.btn {
padding: 3px .75rem !important;
}
.periodTime {
padding: 15px;
padding-bottom: 0px;
}
.carousel {
/* background: #2f4357; */
margin-top: 20px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
position: relative;
right: 37px;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
position: relative;
left: 37px;
}
ul#pagin {
display: none;
}
/* .carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
} */
/* .carousel-control-prev-icon,
.carousel-control-next-icon {
position: relative;
right: 2%;
height: fit-content;
width: fit-content;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}
.carousel-control-next-icon:after {
content: '>';
font-size: 35px;
color: #680f79;
font-weight: 800;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 35px;
color: #680f79;
font-weight: 800;
} */
.carousel-item {
min-height: 180px;
filter: blur(.0px) !important;
/* transform: translateZ(0) !important; */
backface-visibility: hidden !important;
/* Prevent carousel from being distorted if for some reason image doesn't load */
}
.bs-example {
margin: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.carousel-indicators li {
background-color: #9C27B0 !important;
}
.ui-widget.ui-widget-content {
right: 0px !important;
width: 100%;
padding: 17px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="modal-body predefineModal">
<div class="bs-example">
<div id="myCarousel" class="carousel slide">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Trans.Type</th>
<th>Voucher Date</th>
<th>To A/c Name</th>
<th>Narration</th>
<th>Debit</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
<td>DD-MM-YYYY</td>
<td>JOE</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
<td>DD-MM-YYYY</td>
<td>PLUMZ</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<ul id="pagin"></ul>
<a class="left carousel-control-prev" href="#" role="button" data-slide="prev" onload="carouselPage()">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<!-- <span class="sr-only">Previous</span> -->
</a>
<a class="right carousel-control-next" href="#" role="button" data-slide="next" onload="carouselPage()">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<!-- <span class="sr-only">Next</span> -->
</a>
</div>
</div>
Fiddle: tried code fiddle

This is my another answer as you need with fully customize by jQuery and you can define per page records show in data-showperpage="4".
I hope this below snippet help you lot.
$( document ).ready(function(){
var counting = 0;
var slideCounter = 0;
var slidePerpage = Number($("#records").attr("data-showperpage"));
var countSlides = $('#records tbody tr').length;
var totalSlideCount = Math.ceil(countSlides/slidePerpage);
if (countSlides>1) {
$('.carousel-control-prev').hide();
for (var i = 1; slidePerpage>=i; i++) {
$('#records tbody tr:nth-child('+i+')').addClass('active');
}
}
else if (countSlides==1) {
$('.carousel-control-prev,.carousel-control-next').hide();
}
//Prev Functionality
$('.carousel-control-prev').on('click', function(){
slideCounter = slideCounter-slidePerpage;
$('#records tbody tr').removeClass('active');
for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){
//console.log(i); // (4,5,6) // (7,8,9) //....
$('#records tbody tr:nth-child('+i+')').addClass('active');
}
counting = counting-1;
if (counting==0) {
$('.carousel-control-prev').hide();
}
else{
$('.carousel-control-prev,.carousel-control-next').show();
}
});
//Next Functionality
$('.carousel-control-next').on('click', function(){
slideCounter = slideCounter+slidePerpage; //3,6,9,12....
$('#records tbody tr').removeClass('active');
for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){
// console.log(i); // (4,5,6) // (7,8,9) //....
$('#records tbody tr:nth-child('+i+')').addClass('active');
}
counting = counting+1;
if (totalSlideCount==counting+1) {
$('.carousel-control-next').hide();
}
else{
$('.carousel-control-prev,.carousel-control-next').show();
}
});
});
.carousel-control-prev,.carousel-control-next{
width: 40px!important;
height: 40px!important;
position: absolute;
top: 0%;
margin-top: 5px;
border: 2px solid #888;
border-radius: 50px;
background: rgba(255,255,255,0.95);
opacity: 1;
cursor: pointer;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
.table-pagination tbody tr{
display: none;
}
.table-pagination tbody tr.active{
display: table-row;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container p-3 my-1">
<div class="row">
<div class="col-sm-12 position-relative">
<div class="table-responsive">
<table class="table table-bordered table-pagination" id="records" data-showperpage="4">
<thead>
<tr>
<th>#</th>
<th>S.No</th>
<th>Table #1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
</tr>
<tr>
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>6</td>
<td>CP</td>
</tr>
<tr>
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>7</td>
<td>BP</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>8</td>
<td>CR</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>9</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>10</td>
<td>CR</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>11</td>
<td>CP</td>
</tr>
<tr>
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>12</td>
<td>BP</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>13</td>
<td>CR</td>
</tr>
<tr>
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>14</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>15</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>16</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>17</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>18</td>
<td>CR</td>
</tr>
<tr>
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>19</td>
<td>CR</td>
</tr>
</tbody>
</table>
</div>
<div class="left carousel-control-prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</div>
<div class="right carousel-control-next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</div>
</div>
</div>
</div>

blyat just add this in js code and it will work
$(document).ready(function() {
$("#myCarousel").carousel({
interval: false
nav:false,
dots:false,
});
});

just hide the particular element. Initially hide the prev button using display none property, then on clicking next button change the display property of the prev button to block and hide the next button.
$('.carousel-control-prev').click(function(e) {
var nxt = document.getElementsByClassName("carousel-control-next")[0];
nxt.style.display="block";
var currentPage = parseInt($("#pagin li a.current").text());
var prevPage = currentPage - 1;
if (prevPage < pageSize) {
showPage(prevPage);
var currentObj = $("#pagin li a.current");
$("#pagin li a.current").parent().prev().find('a').addClass('current');
currentObj[0].className = "";
} else {
e.preventDefault();}
var prv = document.getElementsByClassName("carousel-control-prev")[0];
prv.style.display="none";
});
$('.carousel-control-next').click(function(e) {
var prv = document.getElementsByClassName("carousel-control-prev")[0];
prv.style.display="block";
var currentPage = parseInt($("#pagin li a.current").text());
var nextPage = currentPage + 1;
if (nextPage < pageSize) {
showPage(nextPage);
$("#pagin li a.current").parent().next().find('a').addClass('current');
var currentObj = $("#pagin li a.current");
currentObj[0].className = "";
} else {
e.preventDefault();
}
var nxt = document.getElementsByClassName("carousel-control-next")[0];
nxt.style.display="none";
});
check out my answer: jsfiddle link
$(document).ready(function() {
$("#myCarousel").carousel({
interval: false
});
});
pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for (var i = 0; i < pageCount; i++) {
$("#pagin").append('<li>' + (i + 1) + '</li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("<").html(">").click(function() {
startPage -= 3
incremSlide -= 3
slide();
});
prev.hide();
var next = $("<li/>").addClass("<").html(">").click(function() {
startPage += 3;
incremSlide += 3;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens) {
$("#pagin li").hide();
for (t = startPage; t < incremSlide; t++) {
$("#pagin li").eq(t + 1).show();
}
if (startPage == 0) {
next.show();
prev.hide();
} else if (numberPage == totalSlidepPage) {
next.hide();
prev.show();
} else {
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
$('.carousel-control-prev').click(function(e) {
var nxt = document.getElementsByClassName("carousel-control-next")[0];
nxt.style.display="block";
var currentPage = parseInt($("#pagin li a.current").text());
var prevPage = currentPage - 1;
if (prevPage < pageSize) {
showPage(prevPage);
var currentObj = $("#pagin li a.current");
$("#pagin li a.current").parent().prev().find('a').addClass('current');
currentObj[0].className = "";
} else {
e.preventDefault();
}
var prv = document.getElementsByClassName("carousel-control-prev")[0];
prv.style.display="none";
});
$('.carousel-control-next').click(function(e) {
var prv = document.getElementsByClassName("carousel-control-prev")[0];
prv.style.display="block";
var currentPage = parseInt($("#pagin li a.current").text());
var nextPage = currentPage + 1;
if (nextPage < pageSize) {
showPage(nextPage);
$("#pagin li a.current").parent().next().find('a').addClass('current');
var currentObj = $("#pagin li a.current");
currentObj[0].className = "";
} else {
e.preventDefault();
}
var nxt = document.getElementsByClassName("carousel-control-next")[0];
nxt.style.display="none";
});
// tried another way
function carouselPage() {
var checkitem = function() {
var $this;
$this = $("#myCarousel");
if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#myCarousel").on("slid.bs.carousel", "", checkitem);
};
#preModal .viewing {
-webkit-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
margin: 0 auto;
}
input[type=checkbox] {
/* left: 23px; */
width: 15px;
}
.carousel-control-prev {
height: fit-content;
width: fit-content;
top: 40%;
left: 10px;
}
.carousel-control-next {
right: 10px;
height: fit-content;
width: fit-content;
top: 40%;
}
.contd {
/* width: 160%;
right: 30%; */
width: 132%;
right: 16%;
}
.predefineModal {
padding-bottom: 0px;
padding-top: 0px;
}
.current,
.carousel_li,
.carousel_a {
display: none;
}
/* .contd:hover .carousel-control-next-icon {
display: block;
}
.contd:hover .carousel-control-prev-icon {
display: block;
} */
.second {
position: relative;
right: 6%;
}
.modal-footer {
max-width: 86%;
}
.indexBtn {
color: #fff;
background-color: #680f79;
border-color: #680f79;
box-shadow: none;
display: inline-block;
font-weight: 400;
border: 1px solid transparent;
padding: 3px .75rem;
font-size: 1rem;
border-radius: .25rem;
}
.indexBtn:hover {
background-color: #c178cf;
}
.diss {
color: #5f5e5e;
background-color: #cecece;
border-color: #cecece;
}
.btn {
padding: 3px .75rem !important;
}
.periodTime {
padding: 15px;
padding-bottom: 0px;
}
.carousel {
/* background: #2f4357; */
margin-top: 20px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
position: relative;
right: 37px;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
position: relative;
left: 37px;
}
ul#pagin {
display: none;
}
/* .carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
} */
/* .carousel-control-prev-icon,
.carousel-control-next-icon {
position: relative;
right: 2%;
height: fit-content;
width: fit-content;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}
.carousel-control-next-icon:after {
content: '>';
font-size: 35px;
color: #680f79;
font-weight: 800;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 35px;
color: #680f79;
font-weight: 800;
} */
.carousel-item {
min-height: 180px;
filter: blur(.0px) !important;
/* transform: translateZ(0) !important; */
backface-visibility: hidden !important;
/* Prevent carousel from being distorted if for some reason image doesn't load */
}
.bs-example {
margin: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
.carousel-indicators li {
background-color: #9C27B0 !important;
}
.ui-widget.ui-widget-content {
right: 0px !important;
width: 100%;
padding: 17px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="modal-body predefineModal">
<div class="bs-example">
<div id="myCarousel" class="carousel slide">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Trans.Type</th>
<th>Voucher Date</th>
<th>To A/c Name</th>
<th>Narration</th>
<th>Debit</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
<td>DD-MM-YYYY</td>
<td>JOE</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
<td>DD-MM-YYYY</td>
<td>PLUMZ</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
<td>DD-MM-YYYY</td>
<td>text</td>
<td>Narration</td>
<td>Debit</td>
<td>Credit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<ul id="pagin"></ul>
<a class="left carousel-control-prev" style="display:none;" href="#" role="button" data-slide="prev" onload="carouselPage()">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<!-- <span class="sr-only">Previous</span> -->
</a>
<a class="right carousel-control-next" href="#" role="button" data-slide="next" onload="carouselPage()">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<!-- <span class="sr-only">Next</span> -->
</a>
</div>
</div>

Try adding this in js code
$(document).ready(function() {
$("#myCarousel").carousel({
interval: false
});
});
$('.carousel-control-prev-icon').hide();
$('.carousel-control-next-icon').hide();
your working link https://jsfiddle.net/ao9vmc7b/

From bootstrap carousel we can count total slides and then check with direction from left to right after slide event fire and add this data-interval="false" data attribute also.
1st count slides when page is ready. If greater than 1 then prev button hide or equal to 1 then prev and next both will hide.
I hope this below snippet will help you.
$( document ).ready(function(){
var countSlides = $('#myCarousel .carousel-item').length;
if (countSlides>1) {
$('#myCarousel .carousel-control-prev').hide();
}
else if (countSlides==1) {
$('#myCarousel .carousel-control-prev, #myCarousel .carousel-control-next').hide();
}
// Checking on next & prev
var countSlide = 1;
$(document).on('slide.bs.carousel', '#myCarousel', function(e) {
var totalSlide = $('#'+e.target.id + ' .carousel-item').length;
if (e.direction=='left') {
countSlide = countSlide+1;
if (totalSlide==countSlide) {
$('#'+e.target.id + ' .carousel-control-next').hide();
}
else{
$('#'+e.target.id + ' .carousel-control-prev').show();
$('#'+e.target.id + ' .carousel-control-next').show();
}
}
else if(e.direction=='right') {
countSlide = countSlide-1;
if (countSlide==1) {
$('#'+e.target.id + ' .carousel-control-prev').hide();
}
else{
$('#'+e.target.id + ' .carousel-control-prev').show();
$('#'+e.target.id + ' .carousel-control-next').show();
}
}
});
});
.carousel-control-prev,.carousel-control-next{
width: 40px;
height: 40px;
position: absolute;
top: 0%;
margin-top: 5px;
border: 2px solid #888;
border-radius: 50px;
background: rgba(255,255,255,0.95);
opacity: 1;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container py-5">
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Table #1</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="carousel-item">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Table #2</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="carousel-item">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Table #3</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="carousel-item">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="party_head">
<tr>
<th>#</th>
<th>S.No</th>
<th>Table #4</th>
</tr>
</thead>
<tbody>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>1</td>
<td>CP</td>
</tr>
<tr class="line-content">
<td>
<input type="checkbox" id="indeterminate-checkbox" />
</td>
<td>2</td>
<td>BP</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>3</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input id="indeterminate-checkbox" type="checkbox" /></td>
<td>4</td>
<td>CR</td>
</tr>
<tr class="line-content">
<td><input type="checkbox" id="indeterminate-checkbox" /></td>
<td>5</td>
<td>CR</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="left carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="right carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>

Popover menu in VueJS without JQuery?

In this answer is there exactly what I am looking for. A menu pops up, when clicking on a table row. The only problem is it uses JQuery...
So my question is, can the same be done without JQuery? Perhaps with VueJS, which I am using?

Translated the example
let rows = document.querySelectorAll("tr");
let btnPane = document.getElementById("button-pane");
document.active = '';
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
btnPane.addEventListener("mouseover", function() {
btnPane.style.display = "block";
if(document.active)
document.active.style.backgroundColor = "lightblue";
});
btnPane.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
if(document.active)
document.active.style.backgroundColor = "";
});
rows.forEach(function(row) {
row.addEventListener("click", function(e) {
var posLeft = e.clientX + 10;
var posBottom = this.offsetTop + this.offsetHeight+8;
btnPane.style.top = posBottom + "px";
btnPane.style.left = posLeft + "px";
btnPane.style.display = "block";
document.active = this;
});
row.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
});
});
table {
border-collapse: collapse;
}
th, td{
border-bottom: 1px solid #aaa;
}
#mytable tbody tr:hover {
background-color: lightblue;
}
.button-pane {
display: none;
position: absolute;
float: left;
top: 0px;
left: 0px;
background-color: lightblue;
width: 150px;
height: 30px;
padding: 0px;
text-align: center;
}
.button-pane button {
display: inline;
cursor: pointer;
}
<table id="mytable" border="1" width="100%">
<thead>
<tr>
<td>HEADER 1</td>
<td>HEADER 2</td>
<td>HEADER 3</td>
<td>HEADER 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>a</td>
<td>aa</td>
<td>aaa</td>
</tr>
<tr>
<td>Item 2</td>
<td>b</td>
<td>bb</td>
<td>bbb</td>
</tr>
<tr>
<td>Item 3</td>
<td>c</td>
<td>cc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<div id="button-pane" class="button-pane">
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
</div>
</div>

Freeze first row and first column of table

I am trying to freeze/lock the first row and the first column of a table.
I have tried giving thead position: absolute; or position: fixed; but it looks strange.
I have followed some answers but I am still confused how to make it.
My HTML / CSS Code :
th {
font-size: 80%;
text-align: center;
}
td {
font-size : 65%;
white-space: pre;
text-align: center;
}
.inner {
overflow-x: scroll;
overflow-y: scroll;
width: 300px;
height: 100px;
}
input {
font-size : 65%;
}
<body>
<div class="inner">
<form method="POST" action="dashboard">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
</form>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
</div>
</body>

Freeze First Row
Freezing the first row can be done with CSS by setting the table body to overflow: auto, and giving a fixed width to the table cells. (See example 1)
Freeze First Row & First Column
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event. (See example 2)
Example 1: (Freeze first row only)
table thead tr {
display: block;
}
table th, table td {
width: 80px;
}
table tbody {
display: block;
height: 90px;
overflow: auto;
}
th {
text-align: center;
}
td {
text-align: center;
white-space: pre;
}
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
Example 2: (Freeze first row and first column)
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});
body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>

If anyone struggles with such problem here is a solution for modern browsers without using jQuery or even JS - just pure HTML and CSS.
The trick is to set table to relative position and first row and/or column cells to sticky position. I added explicitly background color and z-index values to have this overlapping feeling.
.wrapper {
overflow: auto;
height: 100px;
width: 200px;
}
table {
position: relative;
border-collapse: separate;
border-spacing: 0;
}
table th,
table td {
width: 50px;
padding: 5px;
background-color: white;
}
table tbody {
height: 90px;
}
table th {
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
table th:nth-child(1) {
left: 0;
z-index: 3;
}
table td {
text-align: center;
white-space: pre;
}
table tbody tr td:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
}
<div class="wrapper">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>2</td>
<td>Ann</td>
<td>25</td>
<td>Great Britain</td>
</tr>
<tr>
<td>3</td>
<td>Alexander</td>
<td>41</td>
<td>Spain</td>
</tr>
<tr>
<td>4</td>
<td>Wasilij</td>
<td>63</td>
<td>Ukraine</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
</tbody>
</table>
</div>

I resoved this issue from myself with my colleague together yesterday. The adapted CSS is:
.pcvBody {
overflow-x: auto;
width: calc(100vw - 110px);
}
/* CSS START for freezing table column*/
#prodTable {
position: relative;
overflow: hidden;
}
#prodTable thead {
position: relative;
display: block;
overflow: visible;
}
#prodTable thead th {
min-width: 150px;
width: 1000px;
}
#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) {
position: relative;
/*display: block;*/
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
#prodTable tbody {
position: relative;
display: block;
}
#prodTable tbody td {
min-width: 150px;
width: 1000px;
}
#prodTable tbody input {
max-width: 120px;
}
#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) {
position: relative;
/*display: block;*/
background-color: white;
min-height: 20px;
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
/* CSS END for freezing table column*/
And the adjusted scroll event is:
$('#pcvBody').scroll(function(e) {
var scrollLeft = $("#pcvBody").scrollLeft();
//$('#prodTable thead').css("left", -tbodyScrollLeft);
//$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5);
//$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5);
$('#prodTable thead th:nth-child(1)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(1)').css("left", scrollLeft);
$('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
});
And in addition, I added a 'div' to wrap the table.

Categories

Resources