Friday, June 19, 2015

Hide/Show Column in an HTML Table

<script>
function fire() {
    var v = $('#number').val() || "" || 0;
    $('#foo tr > :nth-child('+v+')').toggle();
}
$('button').click(fire);
</script>

<table id="foo">
<tr><td>1</td><td>hide</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>3</td><td>3</td><td>4</td></tr>
</table>
<input id="number" value="2">
<button>Toggle</button>

No comments:

Post a Comment