Question

有人可以帮我解决这个问题吗？我希望使用JQuery添加HTML表列的所有值。请看下面的例子我无法实现这一功能。

第一个表只是一个保存数据的普通表，第二个表应该用jQuery动态填充列。

 <html>
 <head>
 <script type="text/javascript" SRC="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
 <script type="text/javascript">  

 //these will hold the totals
 var ages = 0;
 var weights = 0;
 var benchpresses = 0;

 //reference the rows you want to add
 //this will not include the header row
 var rows = $("#data tr:gt(0)");
 rows.children("td:nth-child(2)").each(function() {
 //each time we add the cell to the total
 ages += parseInt($(this).html());
 });
 rows.children("td:nth-child(3)").each(function() {
 weights += parseInt($(this).html());
 });
 rows.children("td:nth-child(4)").each(function() {
 benchpresses += parseInt($(this).html());
 });

 //then output them to the elements
 $("#ages").html(ages);
 $("#weights").html(weights);
 $("#benchpresses").html(benchpresses);

 </script>
 </head>
 <TABLE class=custom id=data>
 <TBODY>
 <TR>
  <TH>name</TH>
  <TH>age</TH>
  <TH>weight</TH>
  <TH>benchpress</TH>
 </TR>
 <TR>
  <TD>stan</TD>
  <TD>27</TD>
  <TD>177</TD>
  <TD>325</TD>
 </TR>
 <TR>
  <TD>rj</TD>
  <TD>30</TD>
  <TD>135</TD>
  <TD>95</TD>
 </TR>
<TR>
  <TD>jose</TD>
  <TD>29</TD>
  <TD>230</TD>
  <TD>375</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE class=custom>
<TBODY>
<TR>
  <TH>ages</TH>
  <TH>weights</TH>
  <TH>benchpresses</TH>
</TR>
<TR>
  <TD id=ages>&nbsp;</TD>
  <TD id=weights>&nbsp;</TD>
  <TD id=benchpresses>&nbsp;</TD>
</TR>
</TBODY>
</TABLE>
</html>

Answer 1

在您的示例中，对列进行求和的代码将在列/表/数据存在之前执行。修复的几种方法，最简单的方法是将示例中的<script>块移动到表定义之后。

 <html>
 <head>
 <script type="text/javascript" SRC="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

 </head>
 <TABLE class=custom id=data>
 <TBODY>
 <TR>
  <TH>name</TH>
  <TH>age</TH>
  <TH>weight</TH>
  <TH>benchpress</TH>
 </TR>
 <TR>
  <TD>stan</TD>
  <TD>27</TD>
  <TD>177</TD>
  <TD>325</TD>
 </TR>
 <TR>
  <TD>rj</TD>
  <TD>30</TD>
  <TD>135</TD>
  <TD>95</TD>
 </TR>
<TR>
  <TD>jose</TD>
  <TD>29</TD>
  <TD>230</TD>
  <TD>375</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE class=custom>
<TBODY>
<TR>
  <TH>ages</TH>
  <TH>weights</TH>
  <TH>benchpresses</TH>
</TR>
<TR>
  <TD id=ages>&nbsp;</TD>
  <TD id=weights>&nbsp;</TD>
  <TD id=benchpresses>&nbsp;</TD>
</TR>
</TBODY>
</TABLE>
 <script type="text/javascript">  

 //these will hold the totals
 var ages = 0;
 var weights = 0;
 var benchpresses = 0;

 //reference the rows you want to add
 //this will not include the header row
 var rows = $("#data tr:gt(0)");
 rows.children("td:nth-child(2)").each(function() {
 //each time we add the cell to the total
 ages += parseInt($(this).html());
 });
 rows.children("td:nth-child(3)").each(function() {
 weights += parseInt($(this).html());
 });
 rows.children("td:nth-child(4)").each(function() {
 benchpresses += parseInt($(this).html());
 });

 //then output them to the elements
 $("#ages").html(ages);
 $("#weights").html(weights);
 $("#benchpresses").html(benchpresses);

 </script>
</html>

jQuery在HTML表列中添加所有值

1 个答案: