can anyone help to solve this html/javaScript issue; iam tying to implement a solution to hide/show columns in my html table that has a header with multi-rows, when i start hiding the columns from the right it works fine, but when i start from the left, i can see the issue; some cells get hidden even if not needed to be, this is my code thatnks:
$(function() {
// on init
$('.hide-column').eq(0).trigger( "click" );
// on click
$('.hide-column').click(HideColumns)
function HideColumns() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
var colIndex = 0;
var colSpan = 0;
$cell.parent().children().each(function(index) {
if ($(this).is($cell)) {
colSpan = parseInt($cell.attr("colspan") || 1);
return false;
} else {
colIndex += parseInt($(this).attr("colspan") || 1);
};
});
// find and hide col index
for (var i = colIndex; i < (colIndex + colSpan); i++) {
$table.find("tbody tr, thead :nth-child(4)")
.children(":nth-child(" + (i + 1) + ")")
.addClass('hide-col');
};
//always show first header
$table.find("thead :nth-child(1)").children().removeClass('hide-col');
//hide clicked cell
$cell.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body, html {
height: 100%;
overflow: hidden;
}
#right {
height: 100%;
}
table, th, td {
border: 1px solid black; // changing-colors
// word-wrap: break-word;
}
tr:first-child {
font-weight: normal;
}
tr:nth-child(even) {background: #eef} // changing-colors
tr:nth-child(odd) {background: #fee} // changing-colors
* {
box-sizing: border-box;
}
#myTable {
border-collapse: separate;
border: 1px solid #ddd; // changing-colors
width: 100%;
margin-top: 18px;
// Remove the // in front of the below two lines, to get fixed-width
// table-layout: fixed;
// word-wrap: break-word;
font-size: 10.5px;
font-family: arial;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd; // changing-colors
}
#myTable tr:first-child:hover, #myTable tr:hover {
#background-color: Greylight; // changing-colors
}
#myTable tr:first-child {
background-color: #FFFFFF; // changing-colors
font-weight: bold;
}
.table-fixed {
width: 100%;
}
/*This will work on every browser*/
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #ddd;
color: black;
}
thead tr:nth-child(1) th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(2) th {
position: sticky;
position: -webkit-sticky;
top: 30px;
z-index: 999;
background-color: teal;
color: black;
}
thead tr:nth-child(3) th {
position: sticky;
position: -webkit-sticky;
top: 66px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(4) th {
position: sticky;
position: -webkit-sticky;
top: 110px;
z-index: 999;
background-color: white;
color: black;
}
.tscroll {
width: 100%;
height: 80%;
overflow-x: scroll;
overflow-y: scroll;
margin-bottom: 10px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #FFFFFF;
font-weight: bold;
}
.tscroll td, .tscroll th {
//border-bottom: dashed #888 1px;
}
th.yellow {
background: #DAA520;
color: white;
}
th.bluesky {
background: #B0E0E6;
color: black;
}
th.skyblue {
background: #87CEEB;
color: black;
}
th.blue {
background: #4682B4;
color: black;
}
th.NO {
background: white;
color: black;
}
th.green {
background: #40A497;
color: black;
}
th.pink {
background: #FFC0CB;
color: black;
}
th.darkcyan {
background: #008B8B;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
bottom:0;
width:100%;
overflow: hidden;
}
li {
// float: left;
// border-right:1px solid #bbb;
}
li:last-child {
// border-right: none;
}
li a {
// display: BLOCK;
// color: black;
// text-align: center;
// padding: 12px ;
// text-decoration: none;
// font-size: 12px;
// line-height:0.8;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.tscroll th:first-child {
overflow-x: auto;
position: sticky;
left: 0;
//parent opacity: 100%;
z-index: 1000;
}
.red {color:red}
.orange {color:orange}
.green {color:green}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>QoR_results_summary</title>
<style type="text/css">
</style>
</head>
<body>
<br>
<br>
<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
</br>
</br>
</br>
</br>
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th colspan="44">IMP</th>
</tr>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="darkcyan" colspan="43">SYN</th>
</tr>
<tr>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="NO" > </th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA </th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>RUNTIME</th>
</tr>
<tr>
<th class="NO">B</th>
<th>DA</th>
<th>D</th>
<th>F</th>
<th>E</th>
<th>WA</th>
<th>UNC</th>
<th>TAL</th>
<th>BF</th>
<th>IV</th>
<th>SE</th>
<th> AEA</th>
<th> AEA</th>
<th> AA</th>
<th> S</th>
<th> NP</th>
<th> TNS</th>
<th> W</th>
<th> EP</th>
<th> S</th>
<th> WS</th>
<th> NEP</th>
<th> TNS</th>
<th> W</th>
<th> NP</th>
<th> TN</th>
<th>OTHERS</th>
<th>OTHERS </th>
<th>OTHERS </th>
<th>WS</th>
<th>NV</th>
<th>TS</th>
<th>%GT</th>
<th>%OVF</th>
<th>CU</th>
<th>%SD</th>
<th> PWR</th>
<th> PER</th>
<th> PER</th>
<th> POER</th>
<th>TRS</th>
<th>CP</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>TIME</th>
</tr>
</thead>
<tr>
<td>SRL</td>
<td>Nov/9/2020</td>
<td>----</td>
<td>NULL</td>
<td><p datasdc-color="0">0</p></td>
<td><p sdcwarn-color="1619">1619</p></td>
<td><p datasdc-color="0">0</p></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td>2873882</td>
<td>8900320</td>
<td><p dataswns-color="-1.26">-1.26</p></td>
<td><p datafenep-color="277">277</p></td>
<td>-22.62</td>
<td><p dataswns-color="-0.46">-0.46</p></td>
<td><p datafenep-color="42">42</p></td>
<td>-5.77</td>
<td><p dataswns-color="-0.09">-0.09</p></td>
<td><p datafenep-color="56">56</p></td>
<td>-0.30</td>
<td><p dataswns-color="0.00">0.00</p></td>
<td><p datafenep-color="0">0</p></td>
<td>0.00</td>
<td><p dataswns-color="-3.24">-3.24</p></td>
<td><p datafenep-color="41">41</p></td>
<td>-35.94</td>
<td><p datahwns-color="-11.57">-11.57</p></td>
<td><p datafenep-color="2426">2426</p></td>
<td>-1341.85</td>
<td>91.17%</td>
<td>">Map</td>
<td>0.16/Map</td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td><p datap-color="98.59">98.59</p></td>
<td><p datadrv-color="877">877</p></td>
<td>34</td>
<td><p dataulvt-color="0.19">0.19</p></td>
<td>3.52</td>
<td>96.29</td>
<td>12h:04m:03s</td>
</tr>
<tfoot class="footer-restore-columns">
<tr>
<th colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>
It looks like a CSS problem. If you change .hide-col to use display: none; it works fine. Unfortunately, hiding table cells using other methods causes them to misalign with other rows. It may still be possible to achieve the animation with jQuery, by setting display: none after the animation is over.
In this example, the code has also been adjusted slightly to update the colspan of very wide columns (using class bigcolspan): https://jsfiddle.net/apecgwh9/1/
$(function() {
// on init
$('.hide-column').eq(0).trigger( "click" );
// on click
$('.hide-column').click(HideColumns);
$('.bigcolspan').each(function(index) {
$(this).data('colspan', $(this).attr('colspan'));
});
function HideColumns() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
var colIndex = 0;
var colSpan = 0;
$cell.parent().children().each(function(index) {
if ($(this).is($cell)) {
colSpan = parseInt($cell.attr("colspan") || 1);
return false;
} else {
colIndex += parseInt($(this).attr("colspan") || 1);
};
});
// find and hide col index
for (var i = colIndex; i < (colIndex + colSpan); i++) {
$table.find("tbody tr, thead :nth-child(4)")
.children(":nth-child(" + (i + 1) + ")")
.addClass('hide-col');
};
//adjust colspan of top rows
$('.bigcolspan').each(function(index) {
$(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan);
});
//always show first header
$table.find("thead :nth-child(1)").children().removeClass('hide-col');
//hide clicked cell
$cell.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
$('.bigcolspan').each(function(index) {
$(this).attr('colspan', $(this).data('colspan'));
});
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body, html {
height: 100%;
overflow: hidden;
}
#right {
height: 100%;
}
table, th, td {
border: 1px solid black; // changing-colors
// word-wrap: break-word;
}
tr:first-child {
font-weight: normal;
}
tr:nth-child(even) {background: #eef} // changing-colors
tr:nth-child(odd) {background: #fee} // changing-colors
* {
box-sizing: border-box;
}
#myTable {
border-collapse: separate;
border: 1px solid #ddd; // changing-colors
width: 100%;
margin-top: 18px;
// Remove the // in front of the below two lines, to get fixed-width
// table-layout: fixed;
// word-wrap: break-word;
font-size: 10.5px;
font-family: arial;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd; // changing-colors
}
#myTable tr:first-child:hover, #myTable tr:hover {
#background-color: Greylight; // changing-colors
}
#myTable tr:first-child {
background-color: #FFFFFF; // changing-colors
font-weight: bold;
}
.table-fixed {
width: 100%;
}
/*This will work on every browser*/
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #ddd;
color: black;
}
thead tr:nth-child(1) th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(2) th {
position: sticky;
position: -webkit-sticky;
top: 30px;
z-index: 999;
background-color: teal;
color: black;
}
thead tr:nth-child(3) th {
position: sticky;
position: -webkit-sticky;
top: 66px;
z-index: 999;
background-color: white;
color: black;
}
thead tr:nth-child(4) th {
position: sticky;
position: -webkit-sticky;
top: 110px;
z-index: 999;
background-color: white;
color: black;
}
.tscroll {
width: 100%;
height: 80%;
overflow-x: scroll;
overflow-y: scroll;
margin-bottom: 10px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #FFFFFF;
font-weight: bold;
}
.tscroll td, .tscroll th {
//border-bottom: dashed #888 1px;
}
th.yellow {
background: #DAA520;
color: white;
}
th.bluesky {
background: #B0E0E6;
color: black;
}
th.skyblue {
background: #87CEEB;
color: black;
}
th.blue {
background: #4682B4;
color: black;
}
th.NO {
background: white;
color: black;
}
th.green {
background: #40A497;
color: black;
}
th.pink {
background: #FFC0CB;
color: black;
}
th.darkcyan {
background: #008B8B;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
bottom:0;
width:100%;
overflow: hidden;
}
li {
// float: left;
// border-right:1px solid #bbb;
}
li:last-child {
// border-right: none;
}
li a {
// display: BLOCK;
// color: black;
// text-align: center;
// padding: 12px ;
// text-decoration: none;
// font-size: 12px;
// line-height:0.8;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.tscroll th:first-child {
overflow-x: auto;
position: sticky;
left: 0;
//parent opacity: 100%;
z-index: 1000;
}
.red {color:red}
.orange {color:orange}
.green {color:green}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: none !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>QoR_results_summary</title>
<style type="text/css">
</style>
</head>
<body>
<br>
<br>
<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
</br>
</br>
</br>
</br>
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="bigcolspan" colspan="43">IMP</th>
</tr>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="bigcolspan darkcyan" colspan="43">SYN</th>
</tr>
<tr>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="NO"> </th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA</th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>RUNTIME</th>
</tr>
<tr>
<th class="NO">BLOCK</th>
<th>DATE</th>
<th>DIR</th>
<th>FLV</th>
<th>ERR</th>
<th>WARN</th>
<th>UNCLK</th>
<th>TOTAL</th>
<th>BUF</th>
<th>INV</th>
<th>SEQ</th>
<th> AREA</th>
<th> AREA</th>
<th> AREA</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th> WNS</th>
<th> NVEP</th>
<th> TNS</th>
<th>OTHERS WNS</th>
<th>OTHERS NVEP</th>
<th>OTHERS TNS</th>
<th>WHS</th>
<th>NVEP</th>
<th>THS</th>
<th>%GTR</th>
<th>%OVRF</th>
<th>CRU</th>
<th>%SCND</th>
<th> POWER</th>
<th> POWER</th>
<th> POWER</th>
<th> POWER</th>
<th>TRNS</th>
<th>CAP</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>TIME</th>
</tr>
</thead>
<tr>
<td>SRL</td>
<td>Nov/9/2020</td>
<td>----</td>
<td>NULL</td>
<td><a href="">
<p datasdc-color="0">0</p>
</a></td>
<td><a href="">
<p sdcwarn-color="1619">1619</p>
</a></td>
<td><a href="">
<p datasdc-color="0">0</p>
</a></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td>2873882</td>
<td>8900320</td>
<td><a href="">
<p dataswns-color="-1.26">-1.26</p>
</a></td>
<td><a href="">
<p datafenep-color="277">277</p>
</a></td>
<td>-22.62</td>
<td><a href="">
<p dataswns-color="-0.46">-0.46</p>
</a></td>
<td><a href="">
<p datafenep-color="42">42</p>
</a></td>
<td>-5.77</td>
<td><a href="">
<p dataswns-color="-0.09">-0.09</p>
</a></td>
<td><a href="">
<p datafenep-color="56">56</p>
</a></td>
<td>-0.30</td>
<td><a href="">
<p dataswns-color="0.00">0.00</p>
</a></td>
<td><a href="">
<p datafenep-color="0">0</p>
</a></td>
<td>0.00</td>
<td><a href="">
<p dataswns-color="-3.24">-3.24</p>
</a></td>
<td><a href="">
<p datafenep-color="41">41</p>
</a></td>
<td>-35.94</td>
<td><a href="">
<p datahwns-color="-11.57">-11.57</p>
</a></td>
<td><a href="">
<p datafenep-color="2426">2426</p>
</a></td>
<td>-1341.85</td>
<td>91.17%</td>
<td>">Map</td>
<td>0.16/Map</td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td>
<p datap-color="98.59">98.59</p>
</td>
<td><a href="">
<p datadrv-color="877">877</p>
</a></td>
<td>34</td>
<td><a href="">
<p dataulvt-color="0.19">0.19</p>
</a></td>
<td>3.52</td>
<td>96.29</td>
<td>12h:04m:03s</td>
</tr>
<tfoot class="footer-restore-columns">
<tr>
<th class="bigcolspan" colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>
Related
So here I have a table in which I am able to add, delete and edit new data for the respective columns.
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
Currently, the table is set as table-responsive which means the width is adjusted to the length of column. Before adding a new set, I have the table like so:
Before Adding New Set
After pressing the button to add a new set, the style change to this:
After Adding New Set
As you can see, the table width is stretched even though I have set it to be table-responsive. Below is my Script.
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
My question is how can I make it so that the width stays the same without it changing when trying to add or edit the existing data?
Working Snippet Here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 580px;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 500px;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: ;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th{
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td{
color: white;
text-align: center;
vertical-align: middle;
}
.head{
background-color:#4D4F5C;
border-bottom: 3px solid white;
}
#body{
background-color:#4D4F5C;
}
#add_button{
}
h4{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
You can make the cells as position: relative and then the inputs withing it as position: absolute and their width can then be adjusted accordingly.
I've made the width of inputs to be width of cell (excluding the paddings).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 580px;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 500px;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: ;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th{
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td{
color: white;
text-align: center;
vertical-align: middle;
}
.head{
background-color:#4D4F5C;
border-bottom: 3px solid white;
}
#body{
background-color:#4D4F5C;
}
#add_button{
}
h4{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
'<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless table-responsive">
<thead>
<tr class="head">
<th>Set</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
I have a table of two for different exercise and my goal is to be able to add new row for each exercise. Below I have a working snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function() {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function() {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function() {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function() {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function() {
$(this).parents("tr").find("td:not(:last-child)").each(function() {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<table class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
As you can see, if you try to add a new set to one exercise, it will also add a new line for the other exercise, which is not what I wanted. What I want is to be able to add a new set for specific exercise, without a new row being automatically added to another exercise.
How can I achieve this?
You have to uniquely identify each table and button in order to accomplish this. The easiest way is to add an unique id attribute to each table, then add that same value to a name attribute on the respective button.
Meaning, if we call the first table "table1" it needs an id attribute that equals "table1".. then the 'Add Set' button for that table needs to have a name attribute that is also "table1"..(keep in mind I am just using the value "table1" as an example - "table1" could be any value you want, just as long as they match... they have to match due to how I coded the function) For example:
<table id="table1"> ...
<button name="table1">...
This is just one way to do it.. You can do it differently.. the trick is just making sure you can uniquely identify each table and the button on that table..
I have made comments in the code below to make things more legible/understandable..
Demo:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function () {
$(this).attr("disabled", "disabled");
//
// ** Get the unique value we are using from the button **
//
let tableName = $(this).attr('name');
//
// ** Use the unique value on that button, to find the table **
//
var index = $(`#${tableName} tbody tr:last-child`).index();
var row =
'<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
'<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
//
// ** Use the unique value to append row to correct table **
//
$(`#${tableName}`).append(row);
$(`#${tableName} tbody tr`).eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function () {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function () {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function () {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("td:not(:last-child)").each(function () {
$(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function () {
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 40%;
margin: 30px auto;
background: transparent;
padding: 20px;
border-style: solid;
height: 50%;
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
table.table {
margin-left: em;
}
table.table tr th,
table.table tr td {
border-color: #e9e9e9;
position: relative;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
position: absolute;
width: calc(100% - 24px);
padding: 0px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
table th {
width: auto !important;
color: white;
text-align: center;
vertical-align: middle;
}
td {
color: white;
text-align: center;
vertical-align: middle;
}
.head {
background-color: #4D4F5C;
border-bottom: 3px solid white;
}
#body {
background-color: #4D4F5C;
}
#add_button {
margin-left: 9.5em;
}
h4 {
text-align: center;
}
#name {
text-align: center;
}
#reps {
text-align: center;
}
#weight {
text-align: center;
}
#edit {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button
==========================================================================
-->
<table id="table1" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>30</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table1" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
<div class="table-wrapper">
<div class="table-title">
<h4>AB ROLL OUTS</h4>
</div>
<!--
==========================================================================
** Give each table an id **
** this id must match the NAME attribute on the 'Add Set' button **
==========================================================================
-->
<table id="table2" class="table table-borderless">
<thead>
<tr class="head">
<th>Set</th>
<th>Weight(Kg)</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody class="" id="body">
<tr>
<td>1</td>
<td>20</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>15</td>
<td>12</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
<!--
=============================================================================
** Give each button a name attribute **
** this name attribute must match the ID attribute on the correct Table **
=============================================================================
-->
<button name="table2" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
</div>
</div>
</body>
</html>
fotoI need to insert the node value automatically in the last input text "Gesamt" after entering any value from the first vertical column, inside the input text "Mundlich" and the first horizontal line, into the input text "Schriftlich". Ie .. I need to get the value of the node that crosses a value between the first row and the first column inserted into the input text "Mundlich and Schriftlich after event keyup after both textbox is filled.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/jquery.bdt.css" type="text/css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<style>
body{
background-image: url("/img/bg.png");
width: auto;
height:auto;
}
table.searchtbl td, table.pricing th {
text-align: center;
padding: 0px 2px 0px 2px;
border: 1px;
}
table.searchtbl th {
background-color: rgb(230, 61, 61);
border: 1px solid rgb(114, 224, 114);
color: white;
font-family: 'Times New Roman', Times, serif
}
table.searchtbl td {
border: 1px solid silver;
font-size: 14px;
font-family: Arial;
}
.highlighted {
color: white;
}
table.searchtbl {
border: 0px;
border-spacing: 0px;
}
.cur_col {
background-color: rgb(209, 164, 68) !important;
border: 1px solid rgb(14, 11, 5) !important;
border-left: 0px solid #CFE3F9 !important;
border-right: 0px solid #CFE3F9 !important;
}
.cur_cell {
background-color: #0a0ae9 !important;
border: 0px solid #706d5e !important;
border: 0px solid rgb(11, 78, 150) !important;
}
.cur_row {
background-color: rgb(209, 164, 68) !important;
border: 1px solid rgb(10, 8, 2) !important;
border-top: 0px solid rgb(209, 164, 68) !important;
border-bottom: 0px solid rgb(209, 164, 68) !important;
}
.frm {
float: right;
padding: 10% 20% 0px 0px;
margin-top: 30px;
}
* {
box-sizing: border-box;
}
.box1 {
float: left;
width: 50%;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
height: auto;
}
.box2 {
float: right;
width:50%;
padding-right: 0px;
padding-top: 0px;
padding-left: 0px;
height: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.bdt > thead > tr > th, .bdt > tbody > tr > td {
font-size: 13px;
}
.bdt tr:last-child td, .bdt tr:last-child th {
border-bottom: 2px solid #1b1916;
}
.bdt > tbody > tr > td, .bdt > tbody > tr > th, .bdt > tfoot > tr > td, .bdt > tfoot > tr > th, .bdt > thead > tr > td, .bdt > thead > tr > th {
border-color: #e6e7ed;
padding: 1px 0px 18px 53px;
}
.nota {
color: #fa0909
}
fieldset {
position: inherit;
border: none;
padding: 0;
}
legend {
float: left;
padding: 0;
margin-right: 5px;
width: 50px;
text-align: right;
}
label {
position: absolute;
left: -9999px;
}
#id{
width: 80px;
background-color: bisque;
}
#company{
width: auto;
}
#name{
width: auto;
text-transform: capitalize;
}
#m{
width: 100px;
}
#s{
width: 100px;
}
#g{
width: 90px;
background-color: ghostwhite;
}
td {
cursor: pointer;
}
.jumbotron{
height: 120px;
padding-bottom: 50px;
padding-top: 5px
}
.dateTime{
float: right;
padding: 20px 50px 0px 0px;
background-color: #fa0909;
height: auto;
width: auto;
}
.date{
font-size: 30px;
float: right;
padding-right: 50px;
color: rgb(62, 71, 62);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.time{
font-size: 20px;
float: right;
padding-bottom: 0px;
padding-right: 40px;
color: rgb(97, 100, 77);
font-family: 'Times New Roman', Times, serif;
}
.btnShow{
height: 14px;
width: 20px;
padding-top: 0px;
}
</style>
<body>
<div class="jumbotron">
<div class="date">
<span id="dataAtual"></span><br>
<div class="time">
<span id="horaAtual"></span>
</div>
</div>
<form class="form-inline">
<div class="container">
<input type="button" class="btn btn-danger mb-2 btn-sm"
onclick="exportTableToExcel('table', 'Teilnehmer')" value="Export">
<br><br>
<input type="text" class="form-control mb-2 mr-sm-2" name="name" id="name" placeholder="Name">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="m" id="m"
placeholder="Mundlich">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="s" id="s"
placeholder="Schriftlich">
<input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="g" id="g" placeholder="Gesamt">
<input type="button" class="btn btn-primary mb-2 btn-sm" value="Add" onclick="addHTMLTableRow();">
<input type="button" class="btn btn-danger mb-2 btn-sm" value="Edit"
onclick="editHtmlTableSelectedRow()">
<input type="button" class="btn btn-warning mb-2 btn-sm" value="Delete" onclick="deleta()">
</div>
</form>
</div>
<div class="clearfix">
<div class="box2">
<table class='searchtbl' style="background-color: black">
<tr>
<th style="width:5px;height:5px"></th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
<th style="width:20px;">S</th>
</tr>
<tr id="firstRow">
<th style="height:10">M</th>
<td></td>
<td class="row-s">A1<span>a</span></td>
<td class="row-s">A1<span>b</span></td>
<td class="row-s">A1<span>c</span></td>
<td class="row-s">A2<span>a</span></td>
<td class="row-s">A2<span>b</span></td>
<td class="row-s">A2<span>c</span></td>
<td class="row-s">B1<span>a</span></td>
<td class="row-s">B1<span>b</span></td>
<td class="row-s">B1<span>c</span></td>
<td class="row-s">B2<span>a</span></td>
<td class="row-s">B2<span>b</span></td>
<td class="row-s">B2<span>c</span></td>
<td class="row-s">C1<span>a</span></td>
<td class="row-s">C1<span>b</span></td>
<td class="row-s">C1<span>c</span></td>
<td class="row-s">C2<span>a</span></td>
<td class="row-s">C2<span>b</span></td>
<td class="row-s">C2<span>c</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>a</span></td>
<td>A1<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>a</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>b</span></td>
<td>A1<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A1<span>c</span></td>
<td>A1<span>b</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A2<span>a</span></td>
<td>A1<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
<tr>
<th style="height:10">M</th>
<td class="row-m">A2<span>b</span></td>
<td>A1<span>c</span></td>
<td>A1<span>c</span></td>
<td>A2<span>a</span></td>
<td>A2<span>a</span></td>
<td>A2<span>b</span></td>
<td>A2<span>c</span></td>
<td>A2<span>c</span></td>
<td>B1<span>a</span></td>
<td>B1<span>a</span></td>
<td>B1<span>b</span></td>
<td>B1<span>c</span></td>
<td>B1<span>c</span></td>
<td>B2<span>a</span></td>
<td>B2<span>b</span></td>
<td>B2<span>b</span></td>
<td>B2<span>c</span></td>
<td>C1<span>a</span></td>
<td>C1<span>b</span></td>
</tr>
</table>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.sortelements.js" type="text/javascript"></script>
<script src="js/jquery.bdt.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bdt.min.js" type="text/javascript"></script>
</body>
<script>
////INSERIR OS DADOS NO INPUT "Mundlich" (LINHA HORIZONTAL)
$(document).ready(function (e) {
$("#m").keyup(function () {
if ($(this).val() == "") {
$(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
return false;
}
var data = this.value.toUpperCase().split(" ");
$(".searchtbl").find("tr").not("tr:first").find(".row-m").each(function (index, elem) {
var $elem = $(elem);
for (var d = 0; d < data.length; ++d) {
// Highlight
if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
} else {
$elem.removeClass('highlighted');
}
//console.log();
if ($elem.find(".inputType").length == 1) {
if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
$elem.find(".inputType").addClass('highlighted');
} else {
$elem.removeClass('highlighted');
$elem.find(".inputType").removeClass('highlighted');
}
}
}
})
})
});
//INSERIR OS DADOS NO INPUT "Mundlich" (COLUNA VERTICAL)
$(document).ready(function (e) {
$("#s").keyup(function () {
if ($(this).val() == "") {
$(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
return false;
}
var data = this.value.toUpperCase().split(" ");
$(".searchtbl").find("tr").not("tr:first").find(".row-s").each(function (index, elem) {
var $elem = $(elem);
for (var d = 0; d < data.length; ++d) {
// Highlight
if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
} else {
$elem.removeClass('highlighted');
}
//console.log();
if ($elem.find(".inputType").length == 1) {
if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
$elem.addClass('highlighted');
$elem.find(".inputType").addClass('highlighted');
} else {
$elem.removeClass('highlighted');
$elem.find(".inputType").removeClass('highlighted');
}
}
}
})
})
});
</script>
</html>
function autosum(){
var oschrift=document.getElementById('s');
var omund=document.getElementById('m');
var schrift=parseFloat(oschrift.value);
var mund=parseFloat(omund.value);
if (oschrift.value!=schrift) schrift=0; //some safety
if (omund.value!=mund) mund=0;
document.getElementById('g').value=shrift+mund;
}
I am using a ul as a contextual menu in a php-file-listing application.
I recently added this piece of code to move the menu when the cursor is too close from the borders of the window, in order to prevent the menu to be drawn partially outside of the window.
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
But…
Sometimes the code works, and the menu is moved,
And sometimes it doesn't work, and the menu is displayed as below:
(Let's say it doesn't work like 1 out of 5 times)
I tried consoling the variables but they seem to be correct and I really don't understand why it is happening.
Here is a working snippet, where I managed to reproduce the problem.
(As it is an extract of my code, much of the CSS is missing but that's not important.)
// Global vars
var PosX = 0;
var PosY = 0;
// Mouse mouve
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
return;
});
/*
CONTEXT MENU
*/
// Trigger action when the contexmenu is about to be shown
$(document).on("contextmenu", function(event) {
// Avoid the regular one
event.preventDefault();
});
// If the document is clicked somewhere
$(document).on("mousedown", function(e) {
// If the clicked element is not the menu
if ($(e.target).parents(".ContextMenu").length == 0) {
// Hide it
$(".ContextMenu").fadeOut(100);
}
});
// On context menu…
function ContextMenu(id) {
elm = $("#" + id);
/*
console.log("PosY:", PosY);
console.log("elm H:", elm.outerHeight());
console.log("win H:", $(window).height());
console.log("PosX:", PosX);
console.log("elm W:", elm.outerWidth());
console.log("win W:", $(window).width());
*/
// Moves menu if out of screen
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
// Hide and reopen the menu required
elm.fadeOut(100, function() {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
});
//console.log("Context menu on: " + elm);
return false;
}
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
position: fixed;
color: #000;
}
p,
input,
label,
button,
a {
font-family: "Source Sans Pro", "Trebuchet MS", Helvetica, sans-serif;
display: inline-block;
cursor: inherit;
}
#InTable {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
/* Scrollbar */
#Table::-webkit-scrollbar-track-piece {
background-color: #DDD;
}
#Table::-webkit-scrollbar-thumb {
background-color: #000;
}
thead th {
padding: 4px 0;
}
thead th i {
margin-left: 4px;
font-size: 14px !important;
color: #CCC;
}
thead th,
tbody tr {
cursor: pointer;
}
tbody td {
vertical-align: middle;
}
tbody td:first-of-type {
margin: 0 auto;
/*overflow: hidden; */
}
tbody td img {
vertical-align: middle;
height: 32px;
}
tbody tr:nth-of-type(odd) td {
background-color: #EEEEEE;
}
tbody tr:nth-of-type(even) td {
background-color: #DDDDDD;
}
#Table th,
#Table td {
position: relative;
}
#Table p {
padding-left: 4px;
}
.ContextMenu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
z-index: 2;
color: #333;
/* Smoothy color */
}
.ContextMenu div {
background: #e8e8e8;
height: 16px;
padding: 4px;
border-bottom: 1px solid #CCC;
}
.ContextMenu div:not(:first-child) {
border-top: 2px solid #AAA;
}
.ContextMenu li {
display: block;
height: 20px;
padding: 6px 24px 6px 8px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
white-space: nowrap;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span,
.ContextMenu p {
display: inline-block;
height: 20px;
vertical-align: middle;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span {
width: 20px;
text-align: center;
margin-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style media="" data-href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"></style>
<body class="tblr0 bg" id="DropBox" contenttype="text/html; charset=UTF-8" onload="" onresize="">
<div class="abs t40blr0" id="Content" style="top: 100px;">
<div class="abs tblr0 overflow-x-hidden overflow-y-auto" id="Table" style="opacity: 1;">
<table class="tblr0" id="InTable">
<thead class="bg-silver align-l">
<tr style="width: 100%;">
<th data-sort="int" id="Icos" style="width: 68px; min-width: 68px; max-width: 68px;"><p>Icon</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Name" style="width: 291.333px;">
<p>Filename</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Type" style="width: 218.5px;">
<p>Type</p><i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu0');" style="width: 100%;">
<td data-sort-value="0" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name">
<p>. <i>[Current]</i></p>
</div>
</td>
<td style="height: 64px;">
<p>< Current Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu0">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-folder"></i>
<p>Create new Folder</p>
</li>
<li onclick=""><i class="fa fa-file"></i>
<p>Create new File</p>
</li>
<li onclick=""><i class="fa fa-upload"></i>
<p>Upload files in current folder</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download current folder as Zip</p>
</li>
</ul>
</td>
</tr>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu1');" style="width: 100%;">
<td data-sort-value="1" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name pr4">
<p>Acces<span class="opac06"> </span></p>
</div>
</td>
<td style="height: 64px;">
<p>< Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu1" style="top: 218px; left: 854.625px; display: none;">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-i-cursor"></i>
<p>Rename</p>
</li>
<li onclick=""><i class="far fa-arrow-alt-circle-right"></i>
<p>Move</p>
</li>
<li onclick=""><i class="far fa-copy"></i>
<p>Copy</p>
</li>
<li onclick=""><i class="far fa-trash-alt"></i>
<p>Delete</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download folder as Zip</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Can someone enlighten me?
What is wrong with my code?
Thanks in advance.
I believe the problem lay around .fadeOut(100) and .fadeIn(200). Those are animations and as such, they run asynchronously regarding the rest of the code.
To be honest, I am not qualified to provide you with a thorough explanation as to why and HOW this was happening in your code. Basically: the process of updating posX and posY and the process of hiding and showing the menu were overlapping. Note that with your code as is, if you take your time (~1sec) between each click, the problem never occurs, whereas if you start clicking away repeatedly it breaks more and more often, just another hint that the animation's time is the source of the problem.
The solution: put updating posX and posY inside hiding and showing the menu. Specifically inside the callback after hiding the menu, before showing it again.
LET ME KNOW IF THE LEPRECHAUN RESURFACES!
// Global vars
var PosX = 0;
var PosY = 0;
// Mouse mouve
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
return;
});
/*
CONTEXT MENU
*/
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function(event) {
// Avoid the regular one
event.preventDefault();
});
// If the document is clicked somewhere
$(document).bind("mousedown", function(e) {
// If the clicked element is not the menu
if ($(e.target).parents(".ContextMenu").length == 0) {
// Hide it
$(".ContextMenu").fadeOut(100);
}
});
// On context menu…
function ContextMenu(id) {
elm = $("#" + id);
/*
console.log("PosY:", PosY);
console.log("elm H:", elm.outerHeight());
console.log("win H:", $(window).height());
console.log("PosX:", PosX);
console.log("elm W:", elm.outerWidth());
console.log("win W:", $(window).width());
*/
// Hide and reopen the menu required
elm.fadeOut(100, function() {
// Moves menu if out of screen
if ((PosY + elm.outerHeight()) > $(window).height()) {
PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
PosX = PosX - elm.outerWidth();
}
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
});
return false;
}
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
position: fixed;
color: #000;
}
p,
input,
label,
button,
a {
font-family: "Source Sans Pro", "Trebuchet MS", Helvetica, sans-serif;
display: inline-block;
cursor: inherit;
}
#InTable {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
/* Scrollbar */
#Table::-webkit-scrollbar-track-piece {
background-color: #DDD;
}
#Table::-webkit-scrollbar-thumb {
background-color: #000;
}
thead th {
padding: 4px 0;
}
thead th i {
margin-left: 4px;
font-size: 14px !important;
color: #CCC;
}
thead th,
tbody tr {
cursor: pointer;
}
tbody td {
vertical-align: middle;
}
tbody td:first-of-type {
margin: 0 auto;
/*overflow: hidden; */
}
tbody td img {
vertical-align: middle;
height: 32px;
}
tbody tr:nth-of-type(odd) td {
background-color: #EEEEEE;
}
tbody tr:nth-of-type(even) td {
background-color: #DDDDDD;
}
#Table th,
#Table td {
position: relative;
}
#Table p {
padding-left: 4px;
}
.ContextMenu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
z-index: 2;
color: #333;
/* Smoothy color */
}
.ContextMenu div {
background: #e8e8e8;
height: 16px;
padding: 4px;
border-bottom: 1px solid #CCC;
}
.ContextMenu div:not(:first-child) {
border-top: 2px solid #AAA;
}
.ContextMenu li {
display: block;
height: 20px;
padding: 6px 24px 6px 8px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
white-space: nowrap;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span,
.ContextMenu p {
display: inline-block;
height: 20px;
vertical-align: middle;
}
.ContextMenu img,
.ContextMenu i,
.ContextMenu span {
width: 20px;
text-align: center;
margin-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style media="" data-href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"></style>
<body class="tblr0 bg" id="DropBox" contenttype="text/html; charset=UTF-8" onload="" onresize="">
<div class="abs t40blr0" id="Content" style="top: 100px;">
<div class="abs tblr0 overflow-x-hidden overflow-y-auto" id="Table" style="opacity: 1;">
<table class="tblr0" id="InTable">
<thead class="bg-silver align-l">
<tr style="width: 100%;">
<th data-sort="int" id="Icos" style="width: 68px; min-width: 68px; max-width: 68px;"><p>Icon</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Name" style="width: 291.333px;">
<p>Filename</p><i class="fa fa-sort"></i></th>
<th data-sort="string" id="Type" style="width: 218.5px;">
<p>Type</p><i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu0');" style="width: 100%;">
<td data-sort-value="0" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name">
<p>. <i>[Current]</i></p>
</div>
</td>
<td style="height: 64px;">
<p>< Current Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu0">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-folder"></i>
<p>Create new Folder</p>
</li>
<li onclick=""><i class="fa fa-file"></i>
<p>Create new File</p>
</li>
<li onclick=""><i class="fa fa-upload"></i>
<p>Upload files in current folder</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download current folder as Zip</p>
</li>
</ul>
</td>
</tr>
<tr onclick="" oncontextmenu="ContextMenu('ContextMenu1');" style="width: 100%;">
<td data-sort-value="1" style="height: 64px;">
<div class="Icons" style="line-height: 64px; font-size: 60px;"></div>
</td>
<td style="height: 64px;">
<div class="Name pr4">
<p>Acces<span class="opac06"> </span></p>
</div>
</td>
<td style="height: 64px;">
<p>< Directory ></p>
</td>
<td style="height: 64px;">
<ul class="ContextMenu" id="ContextMenu1" style="top: 218px; left: 854.625px; display: none;">
<div onclick="context_menu_close(event);">
<p>Tools</p>
</div>
<li onclick=""><i class="fa fa-i-cursor"></i>
<p>Rename</p>
</li>
<li onclick=""><i class="far fa-arrow-alt-circle-right"></i>
<p>Move</p>
</li>
<li onclick=""><i class="far fa-copy"></i>
<p>Copy</p>
</li>
<li onclick=""><i class="far fa-trash-alt"></i>
<p>Delete</p>
</li>
<li onclick=""><i class="fa fa-download"></i>
<p>Download folder as Zip</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
I've made 4 buttons that each link to a different table.
I'm having trouble individually coloring each button using css... For example, I'd like the first button to be red and the second to be blue, ect.
I really appreciate the help. Thanks.
link to demo: http://jsfiddle.net/LpLhP/8/
html:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<table id="2">
<thead>
<tr>
<td>Sport</td>
<td>Gender</td>
<td>Hair Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Baseball</td>
<td>Female</td>
<td>Blonde</td>
</tr>
<tr>
<td>Curling</td>
<td>Female</td>
<td>Brown</td>
</tr>
<tr>
<td>Hockey</td>
<td>Male</td>
<td>Black</td>
</tr>
</tbody>
</table>
<table id="3">
<thead>
<tr>
<td>Favorite TV Show</td>
<td>Favorite Band</td>
<td>Favorite Food</td>
</tr>
</thead>
<tbody>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
</tr>
<tr>
<td>Lost</td>
<td>Fall Out Boy</td>
<td>Steak</td>
</tr>
<tr>
<td>The Office</td>
<td>OneRepublic</td>
<td>Waffles</td>
</tr>
</tbody>
</table>
<table id="4">
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
<td>1</td>
css:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a{
margin: 0.5rem;
}
a.button{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
table{
width: 80%;
margin: 2em auto;
border: 2px solid black;
}
tr:nth-child(even){
background-color: #F7F7F7;
}
thead{
background-color: darkgrey;
}
th{
padding: 0.75em 0;
}
td{
padding: 0.7em 1em;
}
java:
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
use nth:child() selector in your css as
a.button:nth-child(2){
background-color: #4679BD;
}
http://jsfiddle.net/LpLhP/17/
Give each 'button class' a fellow class such as the following:
<a class="button red" data-table="1" href="#">Slifer Level</a>
<a class="button blue" data-table="2" href="#">Ra Level</a>
<a class="button green" data-table="3" href="#">Obelisk Level</a>
<a class="button yellow" data-table="4" href="#">Exodia Level</a>
Then, give the CSS for each new class you defined
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
there are several ways to do this, the easiest is to make an extra class
<button class="button red"></button>
.red{
background-color:red;
}
button:nth-of-type(1) <--- First Button Styling
Try This
a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}
DEMO
why not add css
a.button:nth-child(1){
background-color:red;
}
a.button:nth-child(2){
background-color:blue;
}
<a class="buttona" data-table="1" href="#">button1</a>
<a class="buttonb" data-table="2" href="#">button2</a>
<a class="buttonc" data-table="3" href="#">button3</a>
<a class="buttond" data-table="4" href="#">button4</a>
.buttona{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
.buttonb{
background-color: blue;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: red;
}
}
Use Different CSS for each button like this.
Change the background-color and the hover background-color.
<style>
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
.button{
color: #fff;
padding: .5rem;
border-radius: 5px;
text-decoration: none;
}
</style>
<a class="button" id="red" data-table="2" href="#">button2</a>
<a class="button" id="blue" data-table="2" href="#">button2</a>
<a class="button" id="grren" data-table="2" href="#">button2</a>
Try this.
Hope this helps.
give individual ids to buttons.
<a class="button" id="button1" data-table="1" href="#">button1</a>
<a class="button" id="button2" data-table="2" href="#">button2</a>
<a class="button" id="button3" data-table="3" href="#">button3</a>
<a class="button" id="button4" data-table="4" href="#">button4</a>
Working Demo
Data table is a pretty good way to target too, but this is probably more versatile site wide. nth of type is great for lists and stuff, but I doubt you'll get much reuse out of it in this situation. You also don't really need adjacent selectors like a.red-button etc.
I'd go with a site wide button style and then block element modifier style.
Here is a fiddle too:
HTML
Button
<button class="button">Button</button>
<input type="submit" class="button" value="button" />
CSS
.button { /* button reset - base */
display: inline-block; /* makes sure you can use margin-top etc */
border: 0; outline: 0; /* overrides defaults */
margin: 0; padding: 0;
border-radius: 0; /* overrides defaults */
background: gray; /* overrides background image */
font-family: inherit; /* gets parent font */
color: inherit; /* gets parent color */
text-align: center;
text-decoration: none;
-webkit-appearence: none; /* removes ios styling defaults */
-moz-appearence: none;
appearence: none;
cursor: pointer;
font-size: 1.2em;
padding: .5em .7em
}
/* specific styles */
.light {
background: red;
}
.dark {
background: purple;
}
.selector {
background: color;
}
.big-button {
font-size: 1.6em; /* etc. */
}
now, use those styles with the data table if you want - I see you are using sass - so you can exted these "mini-themes" to buttons, or divs or whatever and reuse common color combinations
.button[data-table="1"] {
#extend .light;
}
or
a[data-table="1"] {
#extend .dark;
#extend .big-button;
}
/* or make them #mixins and #include them if that suits you better */