使用jQuery更改表元素内容

时间：2016-06-24 13:18:04

标签： javascript jquery html dom element

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

  

OLA！ Estou tentando modificar oconteúdodeumas'tds'específicassem   Sucesso的。一个意思script com脚本alterar a palavra'S / JUROS'por   'C / JUROS'是8x的合作伙伴。阿尔古玛sugestãaparaa melhor forma de fazer   ISSO？ Jáconseguiresgatar os valores num array，mas travei nessa   etapa。

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

3 个答案:

答案 0 :(得分：0)

您可以使用:contains()，.add()，一般同级选择器~，.map()，.replace()，.get()。注意，不清楚是否需要更改html td元素的文本或仅更改存储在数组中的文本？如果预期结果是要更改td元素文本，则可以使用.text(function(index, originalText) {})返回新文本

＆＃13;
＆＃13; 
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('", "') + '"');
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：0)

看看这个

assert_equal "abc", Article.first.title

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

答案 2 :(得分：0)

使用: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>

相关问题
最新问题