如何获取选定的子节点以及jquery中的父节点？

Question

我从查询中返回了一些类似xml的数据：

 <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>

子节点可以按列c2 =＆＃34;分配＆＃34;或者＆＃34;资产类别＆＃34;。如何选择列c2 =＆＃34;资产类别＆＃34;的所有<tr>，而不会丢失父<table>代码？

由于

Answer 1

一种解决方案是使用jquery .filter()，如：

$("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>

<强>参考

.parent()

Answer 2

像这样：

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

这将选择包含分配的td的所有tr。我将课程添加到活动状态，但你可以随心所欲地做。

Answer 3

也许这个？

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

请参阅the fiddle。

Answer 4

我用它来删除不是“资产类别”行的行。您可以轻松地修改它以隐藏或只是更改这些行的样式，如果这是您需要的。此外，您可以轻松地将其更改为从与页面本身不同的源中读取表格。的 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]);
}

或者，您可能希望从另一个文件（如XML文件）中读取表数据。 此版本mock导入表并从表数据字符串开始对其进行评估。的 Alternate 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);