Question

当我单击按钮时，我需要在表中更改td。我是Jquery的初学者。我想使用此document.createTextNode来更改表中的代码

由于我是初学者，所以这将是正确的或有所不同。因为表太长了，所以代码也更多

$(".price-btn_1").click(function() {
  $( "td:eq(2)").empty().append(document.createTextNode("123") );
  $( "td:eq(3)").empty().append(document.createTextNode("456") );

  });
  

> when .price-btn_2 click change text in table td

$(".price-btn_2").click(function() {                          
  $( "td:eq(2)").empty().append(document.createTextNode("50") );
  $( "td:eq(3)").empty().append(document.createTextNode("30") )
  });

.price-table tr td{
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="price-btn_all price-btn_1 active">iPhone 4</button>
<button class="price-btn_all price-btn_2">iPhone 4s</button>
    


    <table class="price-table">
					<thead>
					<tr>
					<td>bla1</td>
					<td>bla2</td>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>123</td>
					<td>456</td>
				</tr>
               </tbody>
    </table>

谢谢！

Answer 1

使用jQuery，可以更轻松地实现您的目标。由于您只想在表格单元格中设置文本，因此只需在选择项上使用text("123")：

$("td:eq(2)").text("123");

http://api.jquery.com/text/

我必须说，仅按文档顺序中的编号获取tds并不是一个好的设计。如果您决定在第一个表之前添加另一个表怎么办？您将必须调整源代码中的所有数字。最好改用id。

Answer 2

概念：

将文本存储在二维数组（2d array）

遍历每个td并根据索引设置其文本

// keep the texts here
var data = [
  ['table0#data0', 'table0#data1', 'table0#data2', 'table0#data3'],
  ['table1#data0', 'table1#data1', 'table1#data2', 'table1#data3'],
];

$(".price-btn_1").click(function() {
  // loop through each <td>
  $(".price-table tbody td").each(function(n, el){
    // data[0] means table1
    // data[0][n] means nth data of table 1
    $(el).html(data[0][n]);
  });
});

$(".price-btn_2").click(function() {
  // loop through each <td>                         
  $(".price-table tbody td").each(function(n, el){
    // data[1] means table2
    // data[1][n] means nth data of table 2
    $(el).html(data[1][n]);
  });
});

jsbin snippet

其他：

当.empty().append()做完全相同的事情时，您实际上不需要使用.html()。（如果您担心性能问题，我认为差异可能不会明显）
仅凭$("td")进行选择可能很危险，假设您的页面上有两个表。

了解更多：

.each() method jquery

javascript array

如何缩短此代码或此真实代码？

2 个答案:

概念：