javascript - 使用 jQuery 更改表格元素内容

Question

我正在尝试修改特定<td>的内容不成功。 想法是改变脚本字'S/JUROS'至' C/JUROS'来自8x 。 对于最好的方法有什么建议吗？我已经成功地拯救了数组中的值，但在这个阶段被捕获了。

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/