Jump to content
UBot Underground

Hide And Display Table Row In The Ui Html Panel


Recommended Posts

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites

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>
Link to post
Share on other sites

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 fine

remember 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>
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...