APTS 3 Posted July 14, 2016 Report Share Posted July 14, 2016 I have a table in my UI HTML Panel with lots of rows and buttons. I would like to be able to hide or show certain rows within the table by pressing a button. One button to hide a row, and another button to display the same row. Can someone explain how to do this? Thanks Quote Link to post Share on other sites
HelloInsomnia 1103 Posted July 14, 2016 Report Share Posted July 14, 2016 You may be able to inject a "display: none" into the HTML style property like so: <tr style="display:none;"> I think it should work in this case, or you could always have another table to display instead. Quote Link to post Share on other sites
APTS 3 Posted July 14, 2016 Author Report Share Posted July 14, 2016 Thanks for the suggestion. That was exactly what I was thinking. To "inject" the display style into the HTML. Question is: How would I do that? Quote Link to post Share on other sites
deliter 203 Posted July 14, 2016 Report Share Posted July 14, 2016 dsa Quote Link to post Share on other sites
deliter 203 Posted July 14, 2016 Report Share Posted July 14, 2016 Sory for the double post couldnt get out of the HTML box and it the html wouldnt post correctly,this is all working now,thanks HInsomnia for the display:none idea too All you need to do is keep the top of my table in tact and add the buttons at the end of the table <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cyborg/bootstrap.min.css"/> </head> <body> <div class="table-responsive" id="myTable"> <table class="table" > <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td> <button class="btn btn-danger" data-state="visible" type="button" onClick="hideRow(this.parentElement)">Hide </button> </td> <td> <button class="btn btn-danger" data-state="visible" type="button" onClick="hideRow(this.parentElement)">Hide </button> </td> </tr> </tbody> </table> </div> <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.6/js/bootstrap.min.js"></script> <script> function hideRow(elem){ if (elem.children[0].dataset.state === "visible"){ for(var x = 0;x < elem.parentElement.children.length;x++){ if (elem ===elem.parentElement.children[x] ){ console.log("fo9ud"+x) elem.children[0].dataset.column = x found = x break; } } for(var x = 0;x < elem.parentElement.parentElement.children.length;x++){ if(elem.parentElement.parentElement.children[x].children[found] === elem){ } else{ elem.parentElement.parentElement.children[x].children[found].style.visibility = "hidden" } } elem.children[0].dataset.state = "invisible" elem.children[0].textContent = "Show" elem.children[0].className = "btn btn-success" } else{ var currentTable = document.querySelectorAll("tr") num=parseInt(elem.children[0].dataset.column) +1 for(var x = 0;x < currentTable.length-1;x++ ){ if(currentTable[x].querySelector("td")!== null){ currentTable[x].querySelector("td:nth-child("+num+")").style.visibility="" //document.querySelector("td:nth-child("+num+")").textContent = re[x].querySelector("td:nth-child("+x+1+")").textContent } } elem.children[0].dataset.state = "visible" elem.children[0].textContent = "Hide" elem.children[0].className = "btn btn-danger" } } var myTable = "" $(document).ready(function(){ myTable = $("#myTable")[0].outerHTML console.log(myTable) }) </script> </body> </html> Quote Link to post Share on other sites
deliter 203 Posted July 14, 2016 Report Share Posted July 14, 2016 Hey I just realised you wanted the rows changed so I fixed it,Ive also made the buttons dynamic,so you can just paste the table in and should work fineremember though to add in the class="table" for bootstrap to style the table <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cyborg/bootstrap.min.css"/> </head> <body> <div class="table-responsive" id="myTable"> <table id="customers" class="table"> <tbody><tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody></table> </div> <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.6/js/bootstrap.min.js"></script> <script> function hideRow(elem){ console.log("total rows:"+elem.parentElement.children.length) if (elem.children[0].dataset.state === "visible"){ for(var x = 0;x < elem.parentElement.children.length;x++){ if (elem ===elem.parentElement.children[x] ){ found = x elem.children[0].dataset.column = x break; } } for(var x = 0;x < elem.parentElement.children.length;x++){ if(elem.parentElement.children[x] === elem){ } else{ //console.log(elem.parentElement.children[x].outerHTML ) elem.parentElement.children[x].style.visibility = "hidden" } } elem.children[0].dataset.state = "invisible" elem.children[0].textContent = "Show" elem.children[0].className = "btn btn-success" } else{ var currentTable = document.querySelectorAll("tr") num=parseInt(elem.children[0].dataset.column) +1 for(var x = 1;x < currentTable.length;x++ ){ if(currentTable[x].children[0]===elem){ for(var y = 0;y < currentTable[x].children.length;y++){ currentTable[x].children[y].style.visibility="" //currentTable[x].querySelector("td:nth-child("+num+")").style.visibility="" //document.querySelector("td:nth-child("+num+")").textContent = re[x].querySelector("td:nth-child("+x+1+")").textContent } } elem.children[0].dataset.state = "visible" elem.children[0].textContent = "Hide" elem.children[0].className = "btn btn-danger" } } } $(document).ready(function(){ myTable = document.querySelectorAll("tr") for(var x = 0; x < myTable.length ;x++){ if(myTable[x].querySelector("td")===null ) { $(myTable[x]).prepend($.parseHTML("<th></th>")) } else{ $(myTable[x]).prepend($.parseHTML('<td> <button class="btn btn-danger" data-state="visible" type="button" onClick="hideRow(this.parentElement)">Hide </button></td>')) } } }) </script> </body> </html> 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.