CODEWITHSUNDEEP
javascripthtmljquery
ishaq
ishaq

Reputation: 177

Table data show using toggle

I have two anchors like

<a href="" class="inches">IN</a> <a href="" class="centimeters">CM</a>

So when I click IN data from 'data-inches' attribute should be shown inside and when CM clicked data from data-cms attribute should be shown inside

I have an HTML table like below

<table>
    <tr>
        <td data-inches="32" data-cms="80.6"></td>
        <td data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-inches="33" data-cms="84.6"></td>
        <td data-inches="34" data-cms="87"></td>
    </tr>
</table>

I want to show data inside <td> using the toggle function of Inches and Centimeters, So when I click the Inches or Centimeters button data should be shown as given in each <td> attribute.

Upvotes: 0

Views: 438

Answers (4)

alexP
alexP

Reputation: 3765

$("a.inches").on("click", function() {
  toggleValues("inches");
});

$("a.centimeters").on("click", function() {
  toggleValues("cms");
});

function toggleValues(type){ //Toggle function
  type = type || "cms"; //if no type specified --> type = cms
  var $cells = $("td"); //Get all cells
  $.each($cells, function() { //Loop through cells
    $(this).text($(this).data(type)); //Set value from data attribute
  });
};
toggleValues(); //Inital
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td data-inches="32" data-cms="80.6"></td>
        <td data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-inches="33" data-cms="84.6"></td>
        <td data-inches="34" data-cms="87"></td>
    </tr>
</table>

<a href="javascript:" class="inches">IN</a>
<a href="javascript:" class="centimeters">CM</a>

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33813

By clicking in the individual table-cells ( which was how I interpreted the question initially )

document.querySelectorAll('table#data td').forEach( td=>{
  td.textContent=td.dataset.inches;
  td.addEventListener('click',function(e){
    this.textContent=Number(this.dataset.state)==1 ? this.dataset.cms : this.dataset.inches;
    this.dataset.state=1-Number(this.dataset.state)
  });
})
td{padding:1rem}
<table id='data' cellpaddin=5px cellspacing=1px border=1>
    <tr>
        <td data-state=1 data-inches="32" data-cms="80.6"></td>
        <td data-state=1 data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-state=1 data-inches="33" data-cms="84.6"></td>
        <td data-state=1 data-inches="34" data-cms="87"></td>
    </td>
</table>

Or by clicking on a hyperlink as per the comment

document.querySelectorAll('a.unittoggle').forEach( a=>{
    a.addEventListener('click',function(e){
        document.querySelectorAll('table#data td').forEach( td=>td.textContent=this.dataset.unit=='cms' ? td.dataset.cms : td.dataset.inches )
    });
})
<a href="#" class="unittoggle inches" data-unit='inches'>IN</a> <a href="#" class="unittoggle centimeters" data-unit='cms'>CM</a>
<table id='data' cellpaddin=5px cellspacing=1px border=1>
    <tr>
        <td data-inches="32" data-cms="80.6"></td>
        <td data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-inches="33" data-cms="84.6"></td>
        <td data-inches="34" data-cms="87"></td>
    </td>
</table>

Upvotes: 1

Chirag Front End Developer
Chirag Front End Developer

Reputation: 74

jQuery(document).ready(function(){
        jQuery('a').on('click',function(e){
            e.preventDefault();
            if(jQuery(this).attr('class') == 'inches'){                
                jQuery('table tr td').each(function(){
                    jQuery(this).text(jQuery(this).attr('data-inches'));    
                });
            }else{
                jQuery('table tr td').each(function(){
                    jQuery(this).text(jQuery(this).attr('data-cms'));    
                })
            }
        })
    });

Upvotes: 0

Mamun
Mamun

Reputation: 68933

On clicking the button link you can check the text and based on which you can get the attribute value and set the text of each td element.

Demo:

$('.inches, .centimeters').click(function(){
    //get the text of clicked element
    var text = $(this).text().trim();
    var attrSel;
    //set the attrubute based on the text
    if(text=='IN'){
      attrSel = 'data-inches';
    }
    else{
      attrSel = 'data-cms';
    }
    //loop trhough each td
    $('td').each(function(){
      //set the text of td with the selected attribute value
      $(this).text($(this).attr(attrSel));
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="inches">IN</a> <a href="#" class="centimeters">CM</a>
<table>
    <tr>
        <td data-inches="32" data-cms="80.6"></td>
        <td data-inches="32.5" data-cms="82.6"></td>
    </tr>
    <tr>
        <td data-inches="33" data-cms="84.6"></td>
        <td data-inches="34" data-cms="87"></td>
    </tr>
</table>

Upvotes: 1

Related Questions