I am trying to display data based on selection in drop-down but i am unable to retrieve entire data.
<!DOCTYPE html> <html> <head> <title>URLs</title> <style>
table, th, td {
border: 0.5px solid black;
}
</style> <script src="https://ajax.googleapis .com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script>
function change(that) { //get the value of changing input
var a = $(that).val() //value of selected data
if (a != "") { //check the not empty condition
$('tr').not('tr[bgcolor="#C2D0C 7"]').hide() //its prevent the heading row `not()`
$('td:contains( ' + a + ')').parent('tr ').show() //match the seleted value to display
$('td:contains( ' + a + ')').parent('tr ').nextUntil(). show()
//its match the next row of other two coloumn its same on the first coloumn
}
else {
$('tr').show() //its select empty data show all row's
}
}
</script> </head> <div> <body> <h1>URLs</h1>
Select your Catageory:
<select onchange="chang e(this)"> <option id=""></option> <option id="a">a</option> <option id="b">b</option> <option id="c">c</option> <option id="d">d</option> </select> <table> <tr bgcolor="#C2D0C 7"> <th>Environment </th> <th>Description </th> <th>URL</th> </tr> <tr id="a"> <td rowspan="3">a</td> <td>URL</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="b"> <td rowspan="5">b</td> <td>Page</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>urls</td> <td><a href=https://qa04.sims.slb.c om/tibcobam/ target="_blank" >https://qa04.sims.slb.c om/tibcobam/</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="c"> <td rowspan="6">c</td> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="d"> <td rowspan="2">d</td> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> </table> </body> </div> </html>
<!DOCTYPE html> <html> <head> <title>URLs</title> <style>
table, th, td {
border: 0.5px solid black;
}
</style> <script src="https://ajax.googleapis .com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script>
function change(that) { //get the value of changing input
var a = $(that).val() //value of selected data
if (a != "") { //check the not empty condition
$('tr').not('tr[bgcolor="#C2D0C 7"]').hide() //its prevent the heading row `not()`
$('td:contains( ' + a + ')').parent('tr ').show() //match the seleted value to display
$('td:contains( ' + a + ')').parent('tr ').nextUntil(). show()
//its match the next row of other two coloumn its same on the first coloumn
}
else {
$('tr').show() //its select empty data show all row's
}
}
</script> </head> <div> <body> <h1>URLs</h1>
Select your Catageory:
<select onchange="chang e(this)"> <option id=""></option> <option id="a">a</option> <option id="b">b</option> <option id="c">c</option> <option id="d">d</option> </select> <table> <tr bgcolor="#C2D0C 7"> <th>Environment </th> <th>Description </th> <th>URL</th> </tr> <tr id="a"> <td rowspan="3">a</td> <td>URL</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="b"> <td rowspan="5">b</td> <td>Page</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>urls</td> <td><a href=https://qa04.sims.slb.c om/tibcobam/ target="_blank" >https://qa04.sims.slb.c om/tibcobam/</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="c"> <td rowspan="6">c</td> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr id="d"> <td rowspan="2">d</td> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> <tr> <td>url</td> <td><a href=xyz.com target="_blank" >xyz.com</a></td> </tr> </table> </body> </div> </html>