0
Ich habe eine Tabelle mit einigen Spalten und ich versuche, die Zeilen, in denen der Wert in einem bestimmten td ist kleiner als 1.5.Tabelle Zeilen nach td-Wert (größer als)
Es funktioniert in dem Snippet unten ohne Probleme, aber es nicht wenn ich eine HTML-Datei mit genau dem gleichen Code aus dem Snippet erstellen.
$('#btnFilter').click(function() {
var value = $('#filter').val();
$('tr').show();
$('tr td.odds').each(function() {
if ($(this).text() < value)
{
$(this).parent().hide();
}
});
});h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
/* demo styles */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: #fb887c;
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
input {
max-width:50px;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ac-custom {
\t padding: 0 1em;
\t max-width: 900px;
\t margin: 0 auto;
}
.ac-custom h2 {
\t font-size: 1em;
\t font-weight: 300;
\t padding: 0 0 0.5em;
\t margin: 0 0 30px;
\t color:#000;
}
.ac-custom ul,
.ac-custom ol {
\t list-style: none;
\t padding: 0;
\t margin: 0 auto;
\t max-width: 800px;
}
.ac-custom li {
\t margin: 0 auto;
\t padding: 0.5em 0;
\t position: relative;
}
.ac-custom label {
\t display: inline-block;
\t position: relative;
\t font-size: 1em;
\t padding: 0 0 0 80px;
\t vertical-align: top;
\t color: #000;
\t cursor: pointer;
\t -webkit-transition: color 0.3s;
\t transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t left: 0;
\t margin-top: -12px;
\t position: absolute;
\t cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
\t opacity: 0;
\t -webkit-appearance: none;
\t display: inline-block;
\t vertical-align: middle;
\t z-index: 100;
}
.ac-custom label::before {
\t content: '';
\t border: 1px solid #000;
\t -webkit-transition: opacity 0.3s;
\t transition: opacity 0.3s;
}
.ac-radio label::before {
\t border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
\t color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
\t opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
\t position: absolute;
\t width: 20px;
\t height: 20px;
\t top: 50%;
\t margin-top: -12px;
\t left: 0px;
\t pointer-events: none;
}
.ac-custom svg path {
\t stroke: #fdfcd3;
\t stroke-width: 13px;
\t stroke-linecap: round;
\t stroke-linejoin: round;
\t fill: none;
}
/* Specific input, SVG and path styles */
/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
\t width: 30px;
\t height: 30px;
\t margin-top: -15px;
\t left: 10px;
\t position: absolute;
}
.ac-circle label::before {
\t background-color: #fff;
\t border: none;
}
.ac-circle svg {
\t width: 70px;
\t height: 70px;
\t margin-top: -35px;
\t left: -10px;
}
.ac-circle svg path {
\t stroke-width: 5px;
}
/* Box Fill */
.ac-boxfill svg path {
\t stroke-width: 8px;
}
/* Swirl */
.ac-swirl svg path {
\t stroke-width: 8px;
}
/* List */
.ac-list ol {
\t list-style: decimal;
\t list-style-position: inside;
}
.ac-list ol li {
\t font-size: 2em;
\t padding: 1em 1em 0 2em;
\t text-indent: -40px;
}
.ac-list ol li label {
\t font-size: 0.5em;
\t text-indent: 0;
\t padding-left: 30px;
}
.ac-list label::before {
\t display: none;
}
.ac-list svg {
\t width: 100%;
\t height: 80px;
\t left: 0;
\t top: 1.2em;
\t margin-top: 0px;
}
.ac-list svg path {
\t stroke-width: 4px;
}
.row {
margin-left: -15px;
margin-right: -15px;
margin-top:0;
}
.col-sm-4 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.col-sm-4 {
float: left;
}
.col-sm-4 {
width: 33.33333333%;
}
.filter-columns {
\t background-color:#fdb5ad;
}
.filter-columns-alt {
\t background-color:#fecbc6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>STAKE</th>
<th>Odds</th>
</tr>
</thead>
<tbody>
<tr id="Memory4" class="part_detail txtMult">
<td class="stake">3</td>
<td class="odds">1.3</td>
</tr>
<tr id="Memory5" class="part_detail txtMult">
<td class="stake">5</td>
<td class="odds">1.5</td>
</tr>
</tbody>
</table>
<br/>
<input type='text' id='filter' />
<button id='btnFilter'>Go</button>
The JS setzen Code muss ausgeführt werden, nachdem DOM geladen wurde. Wickeln Sie es in 'ready()' oder schließen Sie JS am unteren Rand des '
' ein. – Tushar@Tushar Die fertige Funktion hat nicht geholfen –