user4239959
Reputation:
How to do expand and collapse for table column in html file?
I have one HTML (with CSS )file. It has details about progress bar Logs.
In the table, see the start date cloumn. The start date for progress id is mostly same. Consider like the start date is 23-12-2014 09:20:30 for 20 process id.. I have to display only one process id in the date 23-12-2014 09:20:30 instead of displaying 20 records. if i click this then remaining 19 records should expand and display..
i knew about collapsein in javascript.. But don't know how to implement here.
Am newer for Javascript..Help me ..!!
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-color: #343131">
<p class="header">Progress Logs</p>
<table class="table1">
<thead>
<tr>
<th scope="col">Process Id</th><th scope="col">Start Time</th><th scope="col">End Time</th><th scope="col">Output Type</th><th scope="col">Input File Count</th><th scope="col">Processed file Count</th><th scope="col">No of Accounts</th><th scope="col">No of Processed Accounts</th><th scope="col"> Progress </th><th scope="col"></th><th scope="col" style="text-align:left;">Status</th><th scope="col">Failed File Count</th><th scope="col">Summary</th><th scope="col">Error Log</th>
</tr>
</thead>
<tr>
<td style="white-space:nowrap;color:#2f2;">17438@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 12:47:38</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 12:50:04</td><td style="white-space:nowrap;color:#2f2;">pdf</td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('[exp_2_229436_1_m3] ');">1</a></td><td style="white-space:nowrap;color:#2f2;">1</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">17079@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 12:08:09</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 12:10:37</td><td style="white-space:nowrap;color:#2f2;">pdf</td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('[exp_2_229436_1_m3] ');">1</a></td><td style="white-space:nowrap;color:#2f2;">1</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">16966@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 11:58:23</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 12:04:47</td><td style="white-space:nowrap;color:#2f2;">ps</td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('[cmsr_2_20140306_1.dat] ');">1</a></td><td style="white-space:nowrap;color:#2f2;">1</td><td style="white-space:nowrap;color:#2f2;">1697</td><td style="white-space:nowrap;color:#2f2;">1697</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">16866@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 11:50:03</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 11:52:55</td><td style="white-space:nowrap;color:#2f2;">ps</td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('[exp_2_229436_1_m3] ');">1</a></td><td style="white-space:nowrap;color:#2f2;">1</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">566</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">16868@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 11:50:02</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 11:50:44</td><td style="white-space:nowrap;color:#2f2;">ps</td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('[exp_2_234215_1_m15] ');">1</a></td><td style="white-space:nowrap;color:#2f2;">1</td><td style="white-space:nowrap;color:#2f2;">31</td><td style="white-space:nowrap;color:#2f2;">31</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">15589@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:20:30</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:21:09</td><td style="white-space:nowrap;color:#2f2;"></td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('');">8</a></td><td style="white-space:nowrap;color:#2f2;">8</td><td style="white-space:nowrap;color:#2f2;">8</td><td style="white-space:nowrap;color:#2f2;">8</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">15581@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:20:30</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:21:09</td><td style="white-space:nowrap;color:#2f2;"></td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('');">5</a></td><td style="white-space:nowrap;color:#2f2;">5</td><td style="white-space:nowrap;color:#2f2;">9</td><td style="white-space:nowrap;color:#2f2;">9</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
</details>
<tr>
<td style="white-space:nowrap;color:#2f2;">15578@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:20:30</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:21:07</td><td style="white-space:nowrap;color:#2f2;"></td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('');">4</a></td><td style="white-space:nowrap;color:#2f2;">4</td><td style="white-space:nowrap;color:#2f2;">6</td><td style="white-space:nowrap;color:#2f2;">6</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
<tr>
<td style="white-space:nowrap;color:#2f2;">15574@sdrtbp01</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:20:30</td><td style="white-space:nowrap;color:#2f2;">23-12-2014 09:21:07</td><td style="white-space:nowrap;color:#2f2;"></td><td style="white-space:nowrap;color:#2f2;"><a href="javascript:window.alert('');">2</a></td><td style="white-space:nowrap;color:#2f2;">2</td><td style="white-space:nowrap;color:#2f2;">2</td><td style="white-space:nowrap;color:#2f2;">2</td><td style="white-space:nowrap;color:#2f2;">
<hr class="progress" style="width:100%;color:#2f2;">
</td><td style="white-space:nowrap;text-align:right;color:#2f2;">100.00%</td><td style="white-space:nowrap;text-align:left;;color:#2f2;">Finished Successfully</td><td style="white-space:nowrap;color:#2f2;" align="center">0</td><td style="white-space:nowrap;color:#2f2;">All the files processed successfully</td><td style="white-space:nowrap;color:#2f2;"><a href="[email protected]">
View
</a></td>
</tr>
</table>
</body>
</html>
Upvotes: 0
Views: 3855
Answers (3)
V.Rohan
Reputation: 945
How i worked with Expand and collapse functionality is, with the help of JS.
<td id="<ExpandImage>">
<a href="javascript:void(0);" onclick="javascript:expandAll();">
<img src="image<forClick>"/>
</a>
</td>
function expand()
{
document.getElementById('<ExpandTab>').style.display = 'block';
document.getElementById('<CollapseTab>').style.display = 'none';
document.getElementById('<ExpandImage>').innerHTML = '<a href="javascript:void(0);" onclick="javascript:collapse();"><img src="images<collapse>"/></a>';
}
function collapse()
{
document.getElementById('<ExpandTab>').style.display = 'none';
document.getElementById('<CollapseTab>').style.display = '';
document.getElementById('<ExpandImage>').innerHTML = '<a href="javascript:void(0);" onclick="javascript:expand();"><img src="images<Expand>" /></a>';
}
Upvotes: 0
Diptendu
Reputation: 2158
I think what you want is an accordion. Accordion is a UI design and is available in many major libraries. It will take quite some effort if you want to build it from scratch in native JS. I would suggest you to use a library for this.
In this case the first record out of the 20 record group will be the section header. By default the section header will be collapsed and when clicked it will expand and show rest 19 records.
Upvotes: 2
jmore009
Reputation: 12923
I'm not sure I fully understand what you would like to accomplish but I took a stab at it. Is this what you're looking for?
CSS
tbody tr{
display: none;
}
tbody tr:first-child{
display: block;
}
JS
$("tbody tr:first").click(function(){
$("tbody tr").show();
});
Upvotes: 1
Related Questions
- Expand & collapse HTML table
- html5 - how to collapsing and expanding for complicated table elements
- Is it possible to expand and collapse table rows/data with only css?
- expand collapse table in html not working
- Expand / Collapse HTML Tables
- Table columns collapsed in Javascript
- expand/collapse table rows with JQuery
- Collapse/Expand table columns (not rows)
- Expand/Collapse Table row
- Expand and collapse in table row