使用 jQuery 更改表格元素内容

Posted

技术标签:

【中文标题】使用 jQuery 更改表格元素内容【英文标题】：Change a table element content with jQuery 【发布时间】：2016-10-27 03:13:16 【问题描述】：

我正在尝试修改特定<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>

奥拉！ Estoutentando modificar o conteúdo de umas 'tds' específicas sem 继任者。 A ideia é com o script alterar a palavra 'S/JUROS' por 'C/JUROS' 是 8x 的一部分。 Alguma sugestão para a melhor forma de fazer 伊索？ Já consegui resgatar os valores num array, mas travei nessa 埃塔帕。

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

【问题讨论】：

是否要求仅从包含8x 转发的td 更改文本？ 您想更改元素的实际文本还是只将更改后的文本保存到数组中？ 【参考方案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/

【讨论】：

谢谢大家。所有解决方案都很棒。他们帮了很多忙！【参考方案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>

【讨论】：

谢谢大家。所有解决方案都很棒。他们帮了很多忙！【参考方案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>

【讨论】：

谢谢大家。所有解决方案都很棒。他们帮了很多忙！

以上是关于使用 jQuery 更改表格元素内容的主要内容，如果未能解决你的问题，请参考以下文章

解析时，jQuery 会忽略任何不是表格的内容，并且文档会删除表格标签

使用 jQuery 编辑单个表格单元格

使用 jQuery 更改订单内容对象

如何删除jQuery对象中元素

使用 jQuery UI 拖放：更改拖放的元素

使用 jQuery 验证插件显示自定义元素和内容