使用 jQuery 更改表格元素内容

【问题标题】：Change a table element content with jQuery使用 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 更改文本？
  • 您想更改元素的实际文本还是只将更改后的文本保存到数组中？

标签： javascript jquery html dom element


【解决方案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>

【讨论】：

  • 谢谢大家。所有解决方案都很棒。他们帮了很多忙！
猜你喜欢
  • 1970-01-01
  • 2019-07-26
  • 1970-01-01
  • 2012-03-13
  • 2017-02-02
  • 1970-01-01
  • 2013-09-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode