Toggle checkbox when clicking table row without javascript

Question

I have a HTML table in my HTML5/PHP web application (mobile). Users should be able to select a row by clicking anywhere on the row. A selected row should also change color.

The table is structured like this:

<table>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="ids[]" value = "1"></td>
        <td>This is the name</td>
        <td>Completed</td>
    </tr>
    ...
</table>

(name = ids[] is used for PHP to get a list of selected values)

Since Phones don't have very much performance in JavaScript, I want to avoid using it if possible. Is it somehow possible to accomplish this with CSS/HTML?

If not, what is the most performant way using JavaScript?

Community · Accepted Answer · 2017-05-23 12:32:26Z

4

There is NO way you can toggle a checkbox and highlight a row with HTML and CSS only, you need to use Javascript or jQuery...

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

Demo - From here

If you want to highlight the row, you can need to use .closest() to target the parent tr and add a class to that

Demo 2

$("input[type='checkbox']").change(function(e) {
    if($(this).is(":checked")){ 
        $(this).closest('tr').addClass("colorize");
    }else{
        $(this).closest('tr').removeClass("colorize");
    }
});

The above will be invoked, if the checkbox boolean is changed, if it is, than we add colorize class to it, if it isn't, we remove.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Oct 11, 2013 at 11:59

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Harry Over a year ago

@danrhul: I would like to see the solution too. I don't think the required behavior can be achieved with pure CSS.

Madara's Ghost Over a year ago

@danrhul: Whatever solution you may find (I know you're thinking of <label> it would be invalid. There's no proper way of doing it without JavaScript.

ediblecode Over a year ago

It is possible, without using <label>, it just means you'd be visually imitating a table

ediblecode Over a year ago

I don't have the time. Just merely pointing out that you have said it's not possible when it is.

Harry Over a year ago

@danrhul: (not trolling) but it would be really helpful if you can throw in even a simple example. Because all of us would like to learn.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

It is not possible to handle click events without Javascript. It is possible to use some ugly hacks, which will make your markup and styles horrible and impossible to read, to make it look like you can handle click events in CSS, but this is not really practical in a production app, especially on mobile, and it's just generally not a very good idea.

So we're down to Javascript. The first consideration if you want performant Javascript in browser is to steer away from libraries like jQuery, which add a lot of boiler-plate wrapper code around everything you ever do.

So you want to implement it in Javascript, in the simplest and most performant way, that would be something along the lines of this:

// yep, window.onload. You want compat in mobiles, you have to stupidify your
// code a *lot*
window.onload = function() {
    var i, l,
        trs = document.getElementsByTagName('TR');

    for (i = 0, l = trs.length; i < l; i++) {
        attachClickHandler(trs[i]);
    }
};

function clickHandler()
{
    if (this.isSelected) { // expando properties. sorry, compat again
        // change color, check checkbox, whatever
        this.isSelected = false;
    } else {
        // opposite of above
        this.isSelected = true;
    }
}

function attachClickHandler(tr)
{
    tr.onclick = function() {
        clickHandler.call(tr);
    };
}

Horrible, isn't it?

OR

...you could just use jQuery mobile, and worry about performance if it actually becomes a real issue that users complain about, instead of a theoretical problem.

_{Note: in general I am not a fan of jQuery but in the mobile world, where all bets are off in terms of available features, you really have to be a sadist not to use it (or something like it).}

Aaron Cicali · Accepted Answer · 2016-08-07 22:45:55Z

I realize this is very old, but...

You could emulate a table with CSS using display: table-row / table-cell and make your rows out of labels.

It's valid, it works, and it does what the OP asked for - no javascript.

Note: In order to get the highlighting to work an additional element was needed per row. That element needs it's dimensions fixed, both height and width. For this reason, the table's width needs to be predetermined and the row height needs to be predetermined.

.table {
  display: table;
  width: 300px;
}

.row {
  display: table-row;
  line-height: 30px;
}

.cell {
  position: relative;
  z-index: 0;
  display: table-cell;
  padding: 5px 10px;
  background: rgba(0, 0, 0, .1);
}

.highlight {
  position: absolute;
  z-index: -1;
  display: none;
  width: 300px;
  height: 40px;
  margin: -35px 0 0 -10px;
  background: rgba(0, 0, 0, .4);
}

:checked + .highlight {
  display: block;
}

<div class='table'>
  <label class='row'>
    <span class='cell'>
      <input type='checkbox'/>
      <span class='highlight'></span>
    </span>
    <span class='cell'>1</span>  
    <span class='cell'>First row</span>  
  </label>
  <label class='row'>
    <span class='cell'>
      <input type='checkbox'/>
      <span class='highlight'></span>
    </span>
    <span class='cell'>2</span>  
    <span class='cell'>Second row</span>  
  </label>
</div>

Moisés Belchín · Accepted Answer · 2016-12-05 11:30:33Z

1

You can do it simply by using HTML5 <label> tag and for="identifier" attribute.

In your case you need to add the id attribute (string + value might be an option) for your checkbox and then create the labels for the rest of the table cells.

<table>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="ids[]" value="1" id="ids_1"></td>
    <td><label for="ids_1">This is the name</label></td>
    <td><label for="ids_1">Completed</label></td>
  </tr>
  ...
</table>

Please, have a look here for more details : http://www.w3schools.com/tags/att_label_for.asp

answered Dec 5, 2016 at 11:30

Moisés Belchín

3033 silver badges10 bronze badges

Collectives™ on Stack Overflow

Toggle checkbox when clicking table row without javascript

4 Answers 4

15 Comments

OR

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

15 Comments

OR

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related