CODEWITHSUNDEEP
javascriptjquerycss
Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 0

Views: 702

Answers (5)

Tejasvi Karne
Tejasvi Karne

Reputation: 648

I have tried to provide a solution with pure javascript. This should also work even if you change rowspan value.

(function(){
window.addEventListener('load',function(){
  var td=document.querySelector('#result td[rowspan]');
  var n=Number(td.getAttribute('rowspan'));
  var tr=td.parentElement;
  for(var i=0;i<n-1;i++){
    tr=tr.nextElementSibling;
    tr.firstElementChild.style.display="none";
  }
});
})()


(function(){
window.addEventListener('load',function(){
  var td=document.querySelector('#result td[rowspan]');
  var n=Number(td.getAttribute('rowspan'));
  var tr=td.parentElement;
  for(var i=0;i<n-1;i++){
    tr=tr.nextElementSibling;
    tr.firstElementChild.style.display="none";
  }
});
})()
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>

Upvotes: 1

Jigar Shah
Jigar Shah

Reputation: 6223

I hope this help you.

$('#result td').each(function() {
    if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
        $(this).hide();
    }
});


$('#result td').each(function() {
    if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
    	$(this).hide();
    }
});
<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>

Upvotes: 1

Javier
Javier

Reputation: 39

I perfer css to javascript, for those users which might be anti-javascript. With that said I'm throwing my solution out there.

tr > td:nth-child(1){
  display:none;
}
tr:first-child > td:first-child{
  display:table-cell;
}

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 1

rafon
rafon

Reputation: 1542

Try this using jquery and css 'visibilty'.

$('table td').each( function(){
    if ( !$(this).attr('rowspan') ) {
    $(this).css({
    'visibility' : 'hidden'
    });
  }
});

Upvotes: 1

Related Questions