将 table 元素内容更改为 jQuery

Question

我正在尝试修改特定 <td> 的内容，但没有成功。这个想法是将脚本单词 'S/JUROS' 从 8x 更改为 ' C/JUROS'。有关执行此操作的最佳方法的任何建议？我已经设法拯救了一个数组中的值，但是在这个阶段被抓住了。

https://jsfiddle.net/diasbass/23swmsvn/

jQuery(document).ready(function($) {
  if (jQuery(".tbl-payment-system").length) {

    var getTexts = [];
    $(".tbl-payment-system tr td.parcelas").each(function() {
      getTexts.push($(this).text())
    });

    var resultTexts = '"' + getTexts.join('", "') + '"';
    console.log(resultTexts);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
  <tbody>
    <tr class="even">
      <th class="parcelas">Nº de Parcelas</th>
      <th class="valor">Valor de cada parcela</th>
    </tr>

    <tr class="even">
      <td class="parcelas">X S/JUROS</td>
      <td>R$ 600,00</td>
    </tr>

    <tr>
      <td class="parcelas">2X S/JUROS</td>
      <td>R$ 300,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">3X S/JUROS</td>
      <td>R$ 200,00</td>
    </tr>

    <tr>
      <td class="parcelas">4X S/JUROS</td>
      <td>R$ 150,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">5X S/JUROS</td>
      <td>R$ 120,00</td>
    </tr>

    <tr>
      <td class="parcelas">6X S/JUROS</td>
      <td>R$ 100,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">7X S/JUROS</td>
      <td>R$ 85,71</td>
    </tr>

    <tr>
      <td class="parcelas">8X S/JUROS</td>
      <td>R$ 81,87</td>
    </tr>

    <tr class="even">
      <td class="parcelas">9X S/JUROS</td>
      <td>R$ 73,47</td>
    </tr>

    <tr>
      <td class="parcelas">10X S/JUROS</td>
      <td>R$ 66,76</td>
    </tr>

    <tr class="even">
      <td class="parcelas">11X S/JUROS</td>
      <td>R$ 64,81</td>
    </tr>

    <tr>
      <td class="parcelas">12X S/JUROS</td>
      <td>R$ 60,24</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/diasbass/23swmsvn/

Answer 1

您可以使用 :contains()、.add()、通用兄弟选择器 ~、.map()、.replace()、.get()。请注意，不清楚要求是更改 html td 元素的文本还是仅存储在数组中的文本？如果预期结果是要更改 td 元素文本，您可以使用 .text(function(index, originalText) {}) 返回新文本

jQuery(document).ready(function($) {
  if (jQuery(".tbl-payment-system").length) {

    var getTexts = [];
    var x = $(".tbl-payment-system tr:contains(8X)");
    var resultTexts = x.add($("~ tr", x)).map(function() {
     return $("td.parcelas", this).text(function(_, text) {
       return text.replace(/S(?=\/)/, "C")
       }).text()
    }).get();
    console.log('"' + resultTexts.join('", "') + '"');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
  <tbody>
    <tr class="even">
      <th class="parcelas">Nº de Parcelas</th>
      <th class="valor">Valor de cada parcela</th>
    </tr>

    <tr class="even">
      <td class="parcelas">X S/JUROS</td>
      <td>R$ 600,00</td>
    </tr>

    <tr>
      <td class="parcelas">2X S/JUROS</td>
      <td>R$ 300,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">3X S/JUROS</td>
      <td>R$ 200,00</td>
    </tr>

    <tr>
      <td class="parcelas">4X S/JUROS</td>
      <td>R$ 150,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">5X S/JUROS</td>
      <td>R$ 120,00</td>
    </tr>

    <tr>
      <td class="parcelas">6X S/JUROS</td>
      <td>R$ 100,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">7X S/JUROS</td>
      <td>R$ 85,71</td>
    </tr>

    <tr>
      <td class="parcelas">8X S/JUROS</td>
      <td>R$ 81,87</td>
    </tr>

    <tr class="even">
      <td class="parcelas">9X S/JUROS</td>
      <td>R$ 73,47</td>
    </tr>https://jsfiddle.net/23swmsvn/3/

    <tr>
      <td class="parcelas">10X S/JUROS</td>
      <td>R$ 66,76</td>
    </tr>

    <tr class="even">
      <td class="parcelas">11X S/JUROS</td>
      <td>R$ 64,81</td>
    </tr>

    <tr>
      <td class="parcelas">12X S/JUROS</td>
      <td>R$ 60,24</td>
    </tr>
  </tbody>
</table>

jsfiddle https://jsfiddle.net/23swmsvn/5/

Answer 2

看看这个

 $("td").each(function(){
     if (parseInt($(this).text()) >= 8){
       $(this).text(($(this).text()).replace("S/JUROS","C/JUROS"));
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
    <tbody>
        <tr class="even">
            <th class="parcelas">Nº de Parcelas</th>
            <th class="valor">Valor de cada parcela</th>
        </tr>
        
        <tr class="even">
            <td class="parcelas">X S/JUROS</td>
            <td>R$   600,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">2X S/JUROS</td>
            <td>R$   300,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">3X S/JUROS</td>
            <td>R$   200,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">4X S/JUROS</td>
            <td>R$   150,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">5X S/JUROS</td>
            <td>R$   120,00</td>
        </tr>
        
        <tr>
            <td class="parcelas">6X S/JUROS</td>
            <td>R$   100,00</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">7X S/JUROS</td>
            <td>R$   85,71</td>
        </tr>
        
        <tr>
            <td class="parcelas">8X S/JUROS</td>
            <td>R$   81,87</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">9X S/JUROS</td>
            <td>R$   73,47</td>
        </tr>
        
        <tr>
            <td class="parcelas">10X S/JUROS</td>
            <td>R$   66,76</td>
        </tr>
        
        <tr class="even">
            <td class="parcelas">11X S/JUROS</td>
            <td>R$   64,81</td>
        </tr>
        
        <tr>
            <td class="parcelas">12X S/JUROS</td>
            <td>R$   60,24</td>
        </tr>    
    </tbody>
</table>

Answer 3

使用 :contains 找到 8X，然后将其 parent 和 nextUntil 结束。然后 addBack 包含 8X 并获取每一行 :first-child.

然后 each 更新文本：-

var elements = $('table td:contains(8X)').parent().nextUntil().addBack().children(':first-child');

elements.each(function() {
  $(this).text($(this).text().replace('S/JUROS', 'C/JUROS'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
  <tbody>
    <tr class="even">
      <th class="parcelas">Nº de Parcelas</th>
      <th class="valor">Valor de cada parcela</th>
    </tr>

    <tr class="even">
      <td class="parcelas">X S/JUROS</td>
      <td>R$ 600,00</td>
    </tr>

    <tr>
      <td class="parcelas">2X S/JUROS</td>
      <td>R$ 300,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">3X S/JUROS</td>
      <td>R$ 200,00</td>
    </tr>

    <tr>
      <td class="parcelas">4X S/JUROS</td>
      <td>R$ 150,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">5X S/JUROS</td>
      <td>R$ 120,00</td>
    </tr>

    <tr>
      <td class="parcelas">6X S/JUROS</td>
      <td>R$ 100,00</td>
    </tr>

    <tr class="even">
      <td class="parcelas">7X S/JUROS</td>
      <td>R$ 85,71</td>
    </tr>

    <tr>
      <td class="parcelas">8X S/JUROS</td>
      <td>R$ 81,87</td>
    </tr>

    <tr class="even">
      <td class="parcelas">9X S/JUROS</td>
      <td>R$ 73,47</td>
    </tr>

    <tr>
      <td class="parcelas">10X S/JUROS</td>
      <td>R$ 66,76</td>
    </tr>

    <tr class="even">
      <td class="parcelas">11X S/JUROS</td>
      <td>R$ 64,81</td>
    </tr>

    <tr>
      <td class="parcelas">12X S/JUROS</td>
      <td>R$ 60,24</td>
    </tr>
  </tbody>
</table>

将 table 元素内容更改为 jQuery

Change a table element content with jQuery

html

javascript

jquery

dom

element