बूटस्ट्रैप के साथ फ़िल्टर तालिका "चेकबॉक्स" -बटन

मेरे पास एक टेबल है जिसे मैं बूटस्ट्रैप चेकबॉक्स बटन से फ़िल्टर करना चाहता हूं। तालिका एक सरणी से भरा है। तो उदाहरण के लिए मैं केवल "मॉडल" = बीएमडब्ल्यू 1er के साथ पंक्तियां दिखाना चाहता हूं। मुझे बटन को कैसे कनेक्ट करना है और मुझे फ़िल्टर स्क्रिप्ट कैसे करना है?

<!DOCTYPE HTML>
<html>

    <head>
        <title>test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script>
        
<div class="btn-group" data-toggle="buttons"> </div>
</head> <body>
<table class="table table-condensed" border="1" id="usertable"></table>
<script src="js/bootstrap.min.js"></script> <div class="alert alert-success"> Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld! </div> <script type="text/javascript"> $(document).ready(function() { function callJSON() { setTimeout(function() { $.getJSON('./url.php', function(data) { $("#usertable").empty(); var cars = data.rec.vehicles.vehicles; //cars.sort(function(el1,el2){ return el1.model == el2.model ? 0 : (el1.model < el2.model ? -1 : 1); }); cars.sort(function(el1, el2) { if (el1.model == el2.model) { if (el1.fuelState == el2.fuelState) { return 0; } else if (el1.fuelState < el2.fuelState) { return -1; } else { return 1; } } else if (el1.model < el2.model) { return -1; } else { return 1; } }); $.each(cars, function(key, data) { var laenge = cars.length; var vint = data.vin; var positionA = new google.maps.LatLng(data.position.latitude, data.position.longitude); var posiitonB = new google.maps.LatLng(48.1351253, 11.5819806); var entfernung = google.maps.geometry.spherical.computeDistanceBetween(positionA, posiitonB); var entfernung1 = (entfernung/1000); var entfernung2 = entfernung1.toFixed(2); var entfernung3 = entfernung2 + " Km"; console.log(entfernung2); console.log(positionA); console.log(posiitonB); var coopers = ""; var tanken = ""; var drive = "MAN"; var fuelfarbe = "#01DF3A"; var prozent = "%"; var kosten = " 31 Cent/Min " var tanksymbol = "glyphicon-tint"; var farbe = "success"; var flugbadge = ""; var mode = "&dirflg=w"; var kraftstoff = "BENZIN"; var ortbadge = "glyphicon-map-marker"; var entfernungsbadge = "glyphicon-resize-horizontal"; var krafts = " (" + data.fuelState + "%)"; var strasse = data.address; var v = vint.substring(3, 7); var pdf = vint.substring(10, 17); var pdf1 = pdf + ".pdf"; console.log(pdf); if (data.fuelType == "DDE") { kraftstoff = "DIESEL"; } if (v == "SX31") { coopers = " S"; } if (v == "SW71") { coopers = " SD"; } if (data.model == "BMW ActiveE ") { tanksymbol = "glyphicon-flash"; kraftstoff = "STROM"; } if (data.model == "BMW X1 ") { kosten = " 34 Cent/Min "; } if (data.auto == "Y") { drive = "AUT"; } if ((48.347910654607695 < data.position.latitude && data.position.latitude < 48.35988839686733) && (11.781678199768066 < data.position.longitude && data.position.longitude < 11.792492866516113)) { flugbadge = "+12€"; ortbadge = "glyphicon-plane"; } if (data.fuelState <= 25) { tanken = "20 Freiminuten für Vollbetankung"; farbe = "warning"; } if (data.position.latitude == "0") { entfernung3 = "NaN"; strasse = "Nicht lokalisierbar"; farbe = "active"; } $('#usertable').append( function() { return "<tr class=" + farbe + ">" + "<td>" + data.model + coopers + "</td>" + "<td> " + data.carName + "</td>" + //"<td> "+dur+"</td>"+ "<td>" + drive + "</td>" + "<td>" + kraftstoff + krafts + "</td>" + "<td>" + data.licensePlate + "</td>" + "<td> " + strasse + "</td>" + "<td> " + entfernung3 + "</td>" + "<td>" + kosten + flugbadge + "</td>" + "<td>" + laenge + "</td>" + "<td><button class='btn btn-success btn-xs' type='button'>Reservieren</button></td>" + "<td><button class='btn btn-danger btn-xs' type='button'>Route</button></td>" + "<td><button class='btn btn-danger btn-xs' type='button'>Route</button></td>" + //"<td></td>"+ "<tr>"; }); }) }).always(callJSON); }, 2000); } $(callJSON); }); </script> <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-44913908-2', 'voltdrive.de'); ga('send', 'pageview'); </script> </body> </html>
0
क्या आप अपनी समस्या को कम कर सकते हैं।
जोड़ा लेखक Rajaprabhu Aravindasamy, स्रोत
मुझे नहीं पता कि टेबल को चेकबॉक्स बटन से कैसे फ़िल्टर किया जाए। यदि उदा। बीएमडब्ल्यू 1er की जांच की गई है, मैं केवल मॉडल = बीएमडब्ल्यू 1er के साथ पंक्तियों को दिखाना चाहता हूं।
जोड़ा लेखक user2718017, स्रोत
क्या अनिश्चित है? अगर मैं एक दृष्टिकोण था तो मैं कोशिश करता/करती हूं: /
जोड़ा लेखक user2718017, स्रोत
आपको इसे एक कोशिश देने की आवश्यकता होगी और एक और विशिष्ट प्रश्न के साथ वापस आना होगा।
जोड़ा लेखक isherwood, स्रोत