Question

I’m creating a table with jQuery with 3 radio buttons and images in one cell.

Like this:

<input type="radio" name="46" value="a" checked="checked" onfocus="updateStatus('46', 'a')" /><img src="/jwz/images/icons/a.png" name="a" alt="a" />
<input type="radio" name="46" value="d" onfocus="updateStatus('46', 'd')" /><img src="/jwz/images/icons/d.png" name="d" alt="d" />
<input type="radio" name="46" value="w" onfocus="updateStatus('46', 'w')" /><img src="/jwz/images/icons/w.png" name="w" alt="w" />

But I can’t sort the column on checked radio button. A hidden input field doesn’t work
Is there a way to make this work? E.g. with an invisble character or something?

Answer 1

Assuming you use the tablesorter plugin for jQuery, you can sort on that column like this:

$("#yourTable").tablesorter({
    textExtraction: function(node) {
        return $('input:checked', node).val() || node.innerHTML;
    }
});