ThomasDM ThomasDM - 1 month ago 7
CSS Question

Attribute returns Undefined in Table

I'm quite new to JQuery and have encountered following problem.
I am making a website that displays a table where rows with colspan=4 are hidden.
When you click a row the row below (which was previously hidden) should slide out and the row that was clicked should have a red background and white text-color. If that same row is clicked again, the row below should toggleSlide again and the clicked row should return to the previous layout (in my case white BG and black text).

The slideToggle works but problems arise with the colors. HTML en JQuery follows.

HTML:

<table>
<tr>
<td>Test 1</td>
<td>Test 2</td>
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td colspan="4"> This is the first hidden row</td>
</tr>
</table>


CSS:

table{
border-collapse: collapse;
}

td{
color: black;
background-color: white;
}


JQuery:

$(function () {
$("td[colspan=4]").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
} else {
$target.closest("tr").next().find("td").slideToggle("fast");

}


}
);
});


Now above code should work but when I insert a if-else to check if the hidden row is hidden or not I often get Undefined or Visible all the time (I checked through alerts). Same if I check the color-attribute for the clicked row, I often get Undefined.

I think I need something like:

Checking the attributes of the clicked tr:

if($target.closest("tr").attr("color") === "black"){$target.closest("tr").css("color","white").css("background-color","red");}
else{
$target.closest("tr").css("color","black").css("background-color","white");}


OR

Checking if the hidden row is actually hidden:

if($target.closest("tr").next().find("td").is(":visible")){$target.closest("tr").css("color","white").css("background-color","red");}
else{
$target.closest("tr").css("color","black").css("background-color","white");}


I apologize if this question is too vague. I can eloborate more if necessary.

JSFiddle: https://jsfiddle.net/qeg2zb7e/

Answer

Add this jQuery code in else condition

$target.closest("tr").find("td").toggleClass('bg-text');

And also put (bg-text) class into css style.

$(function () {
  $("td[colspan=4]").hide();
  $("table").click(function (event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
    }
    else {
      //add this code
      $target.closest("tr").find("td").toggleClass('bg-text');
      
      $target.closest("tr").next().find("td").slideToggle("fast");
    }
  });
});
table{
		border-collapse: collapse;
	}
	td{
		color: black;
		background-color: white;
	}

/*toggle class for red background and white text color*/
	.bg-text{
		background: red;
		color: white;
	}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu Collapse</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<table class="table table-bordered">
		    <tr>
		      <td>Test 1</td>
		      <td>Test 2</td>
		      <td>Test 3</td>
		      <td>Test 4</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row - 1</td>
		    </tr>
		    <tr>
		      <td>Test 1.1</td>
		      <td>Test 2.1</td>
		      <td>Test 3.1</td>
		      <td>Test 4.1</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row 1.1</td>
		    </tr>
              <tr>
		      <td>Test 1.2</td>
		      <td>Test 2.3</td>
		      <td>Test 3.4</td>
		      <td>Test 4.5</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row 1.2</td>
		    </tr>
			</table>
		</div>
	</div>
</div>

</body>
</html>

Comments