ashleh ashleh -4 years ago 64
HTML Question

Implementing attributes to pre-built table

I'm using a piece of software which automatically generates a table containing data and I'm trying to add some expand/collapse functionality in addition to this. I can't change how the table is created within the software, so the option I'm attempting is to add specific class names and attributes with jQuery.

I'm trying to re-create the layout that the following plugin uses: Alvaro's Collapsable Table Plugin for jQuery, however this may not be the best way to do it.

This is the table that the software generates:



<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' />
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script>

<table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0">
<tr>
<td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td>
<td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td>
</tr>
<tr>
<td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td>
<td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td>
</tr>
<tr>
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td>
</tr>
<tr>
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td>
</tr>
</table>





I manually updated table to replicate the table from Alvaro's example:



<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' />
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.collaptable').aCollapTable({
startCollapsed: true,
addColumn: false,
plusButton: '<span class="icon-plus-circle"></span>',
minusButton: '<span class="icon-minus-circle"></span>'
});
});
</script>


<table style="border-collapse:collapse;" class="ls collaptable table" LID="exampleRS" cellpadding="0">
<tr>
<td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td>
<td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td>
</tr>
<tr data-id="1" data-parent="">
<td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td>
<td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td>
</tr>
<tr data-id="2" data-parent="1">
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td>
</tr>
<tr data-id="3" data-parent="1">
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td>
</tr>
</table>





From the original table, the only way I think I can identify the tags to add the classes 'data-id' and 'data-parent' to, is by accessing the child tag and of it contains 'oh' then it's a parent row, and if it contains 'lc' then it's a child row.

As a starting point, I've tried to loop over every 'tr' within the table and assign 'data-id', and then assign every 'tr' with a 'td' class of 'lc' to a 'data-parent'. This is what I've tried but I'm falling short.



<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' />
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script>

<script>

$(document).ready(function(){

$("[lid='exampleRS'] tr").each(function(){
$(this).attr("data-id", $(this).index());
});

$("[lid='exampleRS'] td.lc").each(function(){
$(this).closest('tr').attr("data-parent", $(this).closest('tr').find('.data-id').text());
});

});

</script>

<table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0">
<tr>
<td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td>
<td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td>
</tr>
<tr>
<td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td>
<td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td>
</tr>
<tr>
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td>
</tr>
<tr>
<td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td>
<td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td>
</tr>
</table>





Any assistance with moving forward and next steps would be great.

Thanks.

Answer Source

Working example:

<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' />
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script>
    
<script>
    
     $(document).ready(function() {
        var lastParentId = 0;
        $("[lid='exampleRS'] tr").each(function() {
            var index=$(this).index();
            if(index==0) return;
            $(this).attr("data-id", index);
            $(this).attr("data-parent", "");
            if ($(this).find(".lc").length > 0) {
                $(this).attr("data-parent", lastParentId);
            } else {
                lastParentId = $(this).index();

            }
        });
        $("[lid='exampleRS']").addClass("collaptable");
        $('.collaptable').aCollapTable({
            startCollapsed: true,
            addColumn: false,
            plusButton: '<span class="icon-plus-circle"></span>',
            minusButton: '<span class="icon-minus-circle"></span>'
        });
    });

</script>
    
    <table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0">
   <tr>
      <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td>
      <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td>
   </tr>
   <tr>
      <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td>
      <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td>
   </tr>
   <tr>
      <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td>
      <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td>
   </tr>
   <tr>
      <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td>
      <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td>
   </tr>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download