Traversing Methods With Jquery To N Level Of A Html Table
I have a structure of nested table, I'm trying to get the value of a cell and paint the parentrow with the condition I give. I can't figure it out what it is wrong in my code, I ev
Solution 1:
Since .
is a meta characters, use \\
to escape it. I would recommend you not to use them.
$('.child2\\.2\\.5')
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\.
And parentrow
is preceding sibling of current elements parent childrow
you have to travese using it.
$('.child2\\.2\\.5').each(function(index) {
var me = $(this);
if (me.text() == "child 2.2.5") {
me.closest('tr.childrow').prev('.parentrow').css('background-color', 'green');
} else if (me.text() == "child 2.2.6") {
me.closest('tr.childrow').prev('.parentrow').css('background-color', 'red');
}
});
$(document).ready(function() {
$('.child2\\.2\\.5').each(function(index) {
var me = $(this);
if (me.text().trim() == "child 2.2.5") {
me.closest('tr.childrow').prev('.parentrow').css('background-color', 'green');
} else if (me.text() == "child 2.2.6") {
me.closest('tr.childrow').prev('.parentrow').css('background-color', 'red');
}
});
});
td,
th {
width: 50px;
}
table {
width: 800px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
<th>header 6</th>
<th>header 7</th>
</thead>
<tbody>
<tr class="parentrow">
<td>parent 1</td>
<td>parent 1</td>
<td>parent 1</td>
<td>parent 1</td>
<td>parent 1</td>
<td>parent 1</td>
<td>parent 1</td>
</tr>
<tr class="childrow">
<td colspan=7>
<table>
<tr>
<td> </td>
<td> </td>
<td class="child1.1">child 1.1</td>
<td class="child1.2">child 1.2</td>
<td class="child1.3">child 1.3</td>
<td class="child1.4">child 1.4</td>
<td class="child1.5">child 1.5</td>
</tr>
</table>
</td>
</tr>
<tr class="parentrow">
<td>parent 2</td>
<td>parent 2</td>
<td>parent 2</td>
<td>parent 2</td>
<td>parent 2</td>
<td>parent 2</td>
<td>parent 2</td>
</tr>
<tr class="childrow">
<td colspan=7>
<table>
<tr>
<td> </td>
<td> </td>
<td class="child2.1.1">child 2.1.1</td>
<td class="child2.1.2">child 2.1.2</td>
<td class="child2.1.3">child 2.1.3</td>
<td class="child2.1.4">child 2.1.4</td>
<td class="child2.1.5">child 2.1.5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="child2.2.1">child 2.2.1</td>
<td class="child2.2.2">child 2.2.2</td>
<td class="child2.2.3">child 2.2.3</td>
<td class="child2.2.4">child 2.2.4</td>
<td class="child2.2.5">child 2.2.5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Post a Comment for "Traversing Methods With Jquery To N Level Of A Html Table"