Hitesh Misro Hitesh Misro - 26 days ago 7
CSS Question

Hide all the rowspan column cells in jQuery or CSS

In the below code, the first

td
has
rowspan
applied making the rest of the cells in that columns shift to the right. Here I want the cells in that column to hide instead of shifting, except the first cell which has rowspan. How do I do that in jQuery or CSS.

So, I want all the cells having 1 to be hidden except the one which was spanned.

Any suggestions would be helpful.

Fiddle: http://jsfiddle.net/a191jffw/28/



th, td{
width:70px;
}

<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>




Answer Source

This might be what your looking for.

$("table tr td[rowspan]").each(function() {
  var i = $("table tr td").index($(this))
  $("table tbody tr").each(function(_, x) {
    $(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
  });
})

Demo

$("table tr td[rowspan]").each(function() {
  var i = $("table tr td").index($(this))
  $("table tbody tr").each(function(_, x) {
    $(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
  });
})
th, td{
  width:70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
    <tbody>
    <tr>
        <td rowspan="4">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
    </tbody>
        </table>
</div>