HTML Table Cell to display partial text with 'Show more/less' button to display/hide full content

user_2577122 0
Viewed 125

Issue: I have a HTML table which has multiple columns with the last column being "Stack Trace" which is usually very big. And displaying complete stack trace makes the Table formatting BAD.

Objective: Want to display the "Stack Trace" as partial text with a 'Show more/less' button. When the 'Show more/less' is clicked for a particular cell, it should display/hide the complete "Stack Trace" for that particular cell.

Below is my csv file.

DATETIME,HOST,REQUEST,STACK_TRACE
5/13/2022 15:04:05,host1,POST,"java.lang.Exception: Stack trace at java.base/java.lang.Thread.dumpStack(Thread.java:1383) at com.ericgoebelbecker.stacktraces.StackTrace.d(StackTrace.java:23) at com.ericgoebelbecker.stacktraces.StackTrace.c(StackTrace.java:19) at com.ericgoebelbecker.stacktraces.StackTrace.b(StackTrace.java:15) at com.ericgoebelbecker.stacktraces.StackTrace.a(StackTrace.java:11) at com.ericgoebelbecker.stacktraces.StackTrace.main(StackTrace.java:7)"
5/13/2022 15:06:05,host2,POST,"Exception in thread ""main"" java.lang.RuntimeException: A test exception   at com.stackify.stacktrace.StackTraceExample.methodB(StackTraceExample.java:13)   at com.stackify.stacktrace.StackTraceExample.methodA(StackTraceExample.java:9)   at com.stackify.stacktrace.StackTraceExample.main(StackTraceExample.java:5)"
5/13/2022 15:07:05,host5,GET,"java.lang.Throwable: A test exception   at com.stackify.stacktrace.StackElementExample.methodD(StackElementExample.java:23)   at com.stackify.stacktrace.StackElementExample.methodC(StackElementExample.java:15)   at com.stackify.stacktrace.StackElementExampleTest     .whenElementOneIsReadUsingThrowable_thenMethodCatchingThrowableIsObtained(StackElementExampleTest.java:34)"

CSS Solution tried: -

<head><style>
table{ 
    width:100%; 
    table-layout: fixed; 
    overflow-wrap: break-word; 
} 
th:nth-child(4){ width:60%; }
td:nth-child(4){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style></head>

Observations: It shows partial "Stack Trace" without any 'Show more/less' option.

enter image description here

I want a 'Show more/less' button/link, which when clicked should display/hide the complete "Stack Trace" for that particular row cell.

html-table css html
1 Answers

you can do something like this for a start so you have an idea. Let me know.

$(document).ready(function(){
  $(".showa").click(function() {
    $("td p.a").css("overflow", "visible");
     $("td p.a").css("white-space", "normal");
  });
  
    $(".hidea").click(function() {
    $("td p.a").css("overflow", "ellipsis");
     $("td p.a").css("white-space", "nowrap");
  });
  
  $(".showb").click(function() {
    $("td p.b").css("overflow", "visible");
     $("td p.b").css("white-space", "normal");
  });
  
    $(".hideb").click(function() {
    $("td p.b").css("overflow", "ellipsis");
     $("td p.b").css("white-space", "nowrap");
  });

});
table{ 
    width:100%; 
    table-layout: fixed; 
    overflow-wrap: break-word; 
} 
th:nth-child(4){ width:60%; }
td:nth-child(4){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  

}

td:active {
  overflow: visible;
  white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table colspan="4">
<tr>
 <th>Datetime</th>
 <th>Host</th>
 <th>Request</th>
 <th>Stack_Trace</th>
 </tr>
 <tbody>
 <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="a">adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah</p> </td>
 <td><button class="showa">Show</button><button class="hidea"> Hide </button></td>
 </tr>
 
  <tr>
 <td>123</td>
 <td>host1</td>
 <td>post</td>
 <td><p class="b">blah blah  blah blah blah  blah blah blah adadasfafsa aSFsfasgagadhsgadhsfjhsfjdgj blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah blah blah  blah</p> </td>
 <td><button class="showb">Show</button><button class="hideb"> Hide </button></td>
 </tr>
 </tbody>
</table>

user_165130010
Related