用jquery遍历HTML表的N级方法 [英] Traversing methods with jquery to N level of a html table

问题描述

我有一个嵌套表的结构，我试图获取一个单元格的值，并用我给出的条件来绘制父行. 我无法弄清楚我的代码有什么问题，我什至尝试了prev()或parent()，但不走运.任何帮助，我们将不胜感激！

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 even tried prev(), or parent(), no luck. Any help is greatly appreciated!

ps.不在乎CSS

ps. do not mind the css

$(document).ready(function() {
  $('.child2.2.5').each(function(index) {
    var me = $(this);
    if (me.text() == "child 2.2.5") {
      me.closest('tr.parentrow').css('background-color', 'green');
    } else if (me.text() == "child 2.2.6") {
      me.closest('tr.parentrow').css('background-color', 'red');
    }
  });
});

td,
th {
  width: 50px;
}
table {
  width: 800px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>&nbsp;</td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</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>

推荐答案

由于.是元字符，因此请使用\\对其进行转义. 我建议您不要使用它们.

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: \\.

并且parentrow在当前元素父级childrow的同级元素之前，您必须使用它来进行旅行.

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>&nbsp;</td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</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>&nbsp;</td>
            <td>&nbsp;</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>

这篇关于用jquery遍历HTML表的N级方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！