javascript - 获取特定列中的值(数字)

Question

我正在尝试让 jquery 计算特定列中所有数字的总和并将其输出为 html 格式。代码如下

var vals = new Array(), i = 0, price = 0;
$("#TextBookTB tr:gt(0) td:nth-child(5)").each(function(){
  if($.inArray(i, vals) < 0)
  {
    if($.isNumeric(vals[i]))
    {
      price = price + vals[i];
      console.log(vals[i]);
      i++;
    }
  }
});
$("#ES3P").text(price);

干杯!

编辑:根据要求的表格。该表与 PHP 相呼应。不太清楚为什么它不能像我希望的那样正常工作

echo '<div class="container-fluid MainContent">
  <div id="TBForm" class="container-fluid MainContentF">
    <table id="TextBookTB" class="table table-dark table-bordered">
        <thead>
          <tr>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
            <th scope="col">F</th>
            <th scope="col">G</th>
            <th scope="col">H</th>
          </tr>
        </thead>
        <tbody>
'; 
LoadBooks();
echo '  </tbody>

      </table>
      <br>
      <div class="row">
        <form id="ES3S" action="enroll.php" method="post">
          <input type="hidden" name="Enrollment" value="Textbooks">
          <button type="submit" class="btn btn-primary">Next Step</button>
        </form>
      </div>
    </div>
    </div>
';

Answer 1

function fCalcPrice()
{
var price = 0;
$("#TextBookTB tr:gt(0)").each(function(){
    var radio = $(this).find("input[type='radio']");
    if(radio.is(":checked"))
    {
        var content = $(this).children().eq(4).text();
        console.log(content);
        if($.isNumeric(content)) {
            price = price + Number(content);
        }
    }
});
$("#ES3P").text(price);
}

fCalcPrice();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid MainContent">
	<div id="TBForm" class="container-fluid MainContentF">
		<table id="TextBookTB" class="table table-dark table-bordered">
			<thead>
				<tr>
					<th scope="col">A</th>
					<th scope="col">B</th>
					<th scope="col">C</th>
					<th scope="col">D</th>
					<th scope="col">E</th>
					<th scope="col">F</th>
					<th scope="col">G</th>
					<th scope="col">H</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>A</td>
					<td>B</td>
					<td>C</td>
					<td>D</td>
					<td>1</td>
					<td>F</td>
					<td>G</td>
					<td>H <input type="radio" value="test" onchange="fCalcPrice()"/></td>
				</tr>
				<tr>
					<td>A</td>
					<td>B</td>
					<td>C</td>
					<td>D</td>
					<td>2</td>
					<td>F</td>
					<td>G</td>
					<td>H <input type="radio" value="test" onchange="fCalcPrice()"/></td>
				</tr>
				<tr>
					<td>A</td>
					<td>B</td>
					<td>C</td>
					<td>D</td>
					<td>3</td>
					<td>F</td>
					<td>G</td>
					<td>H <input type="radio" value="test" onchange="fCalcPrice()"/></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div id="ES3P"></div>

Jaromanda X 的代码片段对我来说似乎使用 jQueryeach 函数工作得很好，但只有当将 $(td) 更改为 $(this) 时，才包含可运行的代码片段。

编辑:更新为仅将行添加到包含按钮的总数中编辑#2:更新为仅添加包含勾选单选框的行