CODEWITHSUNDEEP
jqueryasp.net
Bercovici Adrian
Bercovici Adrian

Reputation: 9360

How to set checkbox inside table cell with jquery?

I am trying to set a checkbox inside the first cell of each row for given indexes. How can I access the checkbox? I have tried so far the following:

function checkLocationTable (colindexes,tablename) {
    var table = document.getElementById(tablename);
    for (var i = 0, row; row = table.rows[i]; i++) {
        if (colindexes.includes(i)) {
            $(this).find("td:eq(0) .checkbox").prop("checked", true);
        }
    }
}

colindexes is an array of ints, e.g.: [1, 2, 3].

I have also tried:

function checkLocationTable(colindexes, tablename) {
    $("#" + tablename + " tr").each(function(index) {
        if ($.inArray(colindexes, index)) {
            $(this).find("td:eq(0) > checkbox").attr("checked", true);
        }
    });
}

The second example does not even enter inside the inner function.

Upvotes: 0

Views: 1912

Answers (3)

Daniel Manta
Daniel Manta

Reputation: 6693

Based on your last try. Your code is almost correct. The order of the parameters in $.inArray should be Index, colindexes, instead of colindexes, index. Also I have added >= 0 because inArray returns -1 when the element is not found.

checkLocationTable([0, 2], 'table1')

function checkLocationTable(colindexes, tablename) {
  $("#" + tablename + " tr").each(function(index) {
    if ($.inArray(index, colindexes) >= 0) {
      $(this).find("td:eq(0) > input[type='checkbox']").attr("checked", true);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

The Sizzle expression ends with input[type='checkbox'] instead of checkbox.

Upvotes: 1

Ctznkane525
Ctznkane525

Reputation: 7465

I think you need to do your selection on the row object instead of this:

function checkLocationTable (colindexes,tablename){
            var table = document.getElementById(tablename);
            for (var i = 0, row; row = table.rows[i]; i++) {
                if(colindexes.includes(i))
                {

                    $(row).find("td:first input:checkbox").prop("checked",true);

                }
            }
        }

Upvotes: 1

sanatsathyan
sanatsathyan

Reputation: 1763

You put ".checkbox" in your javascript function, which finds element with class name checkbox, that might me the problem, try this :

function checkLocationTable (colindexes,tablename){
        var table = document.getElementById(tablename);
        for (var i = 0, row; row = table.rows[i]; i++) {
            if(colindexes.includes(i))
            {

                $(this).find("td:eq(0) checkbox").prop("checked",true);

            }
        }
    }

In your Jquery, inArray is given wrong, it should be like,

function checkLocationTable(colindexes,tablename)
{
     $("#"+tablename+" tr").each(function(index){ 
       if($.inArray(index,colindexes))
       {
          $(this).find("td:eq(0) > checkbox").prop("checked",true);
       }
  });
}

Hope this helps!

Upvotes: 0

Related Questions