CODEWITHSUNDEEP
javascriptjqueryhtml
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

How the select the multiple Table data as per selected checkbox?

There is one data table with two rows, as per below imageenter image description here

When user click on 2bit it should highlight that TD in that column only. I achieved this using jQuery for one check box selection, but when multiple check box selection like 2 and 4 it should highlight both the TD.

http://jsbin.com/exazoh/edit#preview working example for single value highlight.

Code: http://jsbin.com/exazoh/2/edit

Upvotes: 1

Views: 271

Answers (1)

nnnnnn
nnnnnn

Reputation: 150070

Try the following function:

jQuery(function() {
    // on change of an input with a name starting with "bit-select"...  
    jQuery('input[name^="bit-select"]').change(function(){
        var checked = this.checked,
            val = this.value,
            column = $(this).closest("th").index() + 1;

        // for each td in the current column
        jQuery("#tableData tr.data td:nth-child(" +
                          column + ")").each(function() {
          var $td = $(this);
          // does the current td match the checkbox?
          if ($td.text() == val) {
             if (checked)
                $td.addClass("jquery-colorBG-highLight");
             else
                $td.removeClass("jquery-colorBG-highLight");
          }
        });
    });
});

I had to add the value attributes to the second set of checkboxes.

Working demo: http://jsbin.com/exazoh/4/edit#preview

Or the short version, since I notice you were using .filter() originally:

jQuery(function() {
  jQuery('input[name^="bit-select"]').change(function(){
    var method = this.checked ? "addClass" : "removeClass",
        val = this.value;

    jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")")
      .filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight");
  });
});

Demo: http://jsbin.com/exazoh/5/edit

Upvotes: 1

Related Questions