Geek Answers Handbook

How to get selected child nodes as well as parent node in jquery?

I have some xml-like data returned from a request:

 <table>
 <tr linetype="data" linenum="1">
  <td colnum="c0">Balanced</td> 
  <td colnum="c1" rawvalue="24">24</td> 
  <td colnum="c2">Allocation</td> 
  </tr>
 <tr linetype="data" linenum="2">
  <td colnum="c0">Equity</td> 
  <td colnum="c1" rawvalue="27">27</td> 
  <td colnum="c2">Allocation</td> 
  </tr>
 <tr linetype="data" linenum="3">
  <td colnum="c0">Fixed Income</td> 
  <td colnum="c1" rawvalue="23">23</td> 
  <td colnum="c2">Allocation</td> 
  </tr>
 <tr linetype="data" linenum="4">
  <td colnum="c0">High Yield Bond</td> 
  <td colnum="c1" rawvalue="25">25</td> 
  <td colnum="c2">Allocation</td> 
  </tr>
 <tr linetype="data" linenum="7">
  <td colnum="c0">Aggregate Bonds</td> 
  <td colnum="c1" rawvalue="73">73</td> 
  <td colnum="c2">Asset Category</td> 
  </tr>
 <tr linetype="data" linenum="8">
  <td colnum="c0">Asian Equity</td> 
  <td colnum="c1" rawvalue="101">101</td> 
  <td colnum="c2">Asset Category</td> 
  </tr>
 <tr linetype="data" linenum="9">
  <td colnum="c0">Balanced</td> 
  <td colnum="c1" rawvalue="83">83</td> 
  <td colnum="c2">Asset Category</td> 
 </tr>
</table>

Child nodes can be grouped by column c2 = "Distribution" or "Asset Category". How can I select everything <tr>where the column c2 = "Category of the object", without losing the parent tag <table>?

thank

+4
source share
4 answers

One solution is to use jquery .filter () , for example:

$("table tr td[colnum='c2']").filter(function() {
  return $(this).text() == "Asset Category";
}).parent().css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr linetype="data" linenum="1">
    <td colnum="c0">Balanced</td>
    <td colnum="c1" rawvalue="24">24</td>
    <td colnum="c2">Allocation</td>
  </tr>
  <tr linetype="data" linenum="2">
    <td colnum="c0">Equity</td>
    <td colnum="c1" rawvalue="27">27</td>
    <td colnum="c2">Allocation</td>
  </tr>
  <tr linetype="data" linenum="3">
    <td colnum="c0">Fixed Income</td>
    <td colnum="c1" rawvalue="23">23</td>
    <td colnum="c2">Allocation</td>
  </tr>
  <tr linetype="data" linenum="4">
    <td colnum="c0">High Yield Bond</td>
    <td colnum="c1" rawvalue="25">25</td>
    <td colnum="c2">Allocation</td>
  </tr>
  <tr linetype="data" linenum="7">
    <td colnum="c0">Aggregate Bonds</td>
    <td colnum="c1" rawvalue="73">73</td>
    <td colnum="c2">Asset Category</td>
  </tr>
  <tr linetype="data" linenum="8">
    <td colnum="c0">Asian Equity</td>
    <td colnum="c1" rawvalue="101">101</td>
    <td colnum="c2">Asset Category</td>
  </tr>
  <tr linetype="data" linenum="9">
    <td colnum="c0">Balanced</td>
    <td colnum="c1" rawvalue="83">83</td>
    <td colnum="c2">Asset Category</td>
  </tr>
</table>
Run codeHide result

References

.parent ()

+3
source

Like this:

$("table tr td:contains('Allocation')").closest("tr").addClass("active");

This will select all tr ​​with td that contains the distribution. I am adding the class active, but you can do anything.

0

, ?

var trs = $("td[colnum=c2]")
    .filter(function (x, i) { return $(i).html() === 'Asset Category'; })
    .map(function (x, i) { return $(i).parent()[0]; });

.

0

I used this to remove rows that were not Object Category strings. you can easily change this to hide or simply change the style of these lines if that is what you need. In addition, you can easily change this to read in a table from a source other than the page itself. Demo 

var mytable = [];
var rows = $('table').find('tr');

for(var i = 0; i < rows.length; i++) {
    if(rows.eq(i).find('td[colnum="c2"]').text() == "Asset Category") {
       mytable.push(rows.eq(i));
    }
}

$('table').html("");
for(var j = 0; j < mytable.length; j ++) {
    $('table').append(mytable[j]);
}



In addition, you can read table data from another file (for example, an XML file). This version of the layout imports the table and evaluates it, starting with the data line of the table. Alternative DEMO 

var tablestring = '<table><tr linetype="data" linenum="1"><td colnum="c0">Balanced</td> <td colnum="c1" rawvalue="24">24</td><td colnum="c2">Allocation</td></tr>...</table>';

var xmlDoc = $.parseXML( tablestring );
var $xml = $( xmlDoc );

var mytable = [];
var rows = $xml.find('tr');

for(var i = 0; i < rows.length; i++) {
    if(rows.eq(i).find('td[colnum="c2"]').text() == "Asset Category") {
       var temprow = document.createElement("TR");
       temprow.innerHTML = rows.eq(i).html();
       mytable.push(temprow);
    }
}

var newtable = document.createElement("TABLE");
$newtable = $( newtable );

for(var j = 0; j < mytable.length; j ++) {
    $newtable.append(mytable[j]);
}

$('body').append($newtable);
0
source

More articles:


All Articles