javascript - 使用 Javascript 的 Html 表值

Question

我有一个这样的html表：

     Invoice#          Due Date      Balance      Select 
      12345           12/25/2011    $1,356.00       X
      56789           12/30/2011    $1,000.00       X

      Total:                        $2,356.00

在表格下方，我有一个文本框。选择或取消选择行中的复选框时，我希望TextBox的值更新以添加或减少所选行中的余额，即在未选中复选框时减去行中所示的余额，并在选中时添加. 默认情况下，这些框将被选中。

Answer 1

假设每个都没有其他子元素，如<p>, <a>& <button>，只包含文本。如果不是，请重复第一个语句，直到到达<tr>元素。

function getBalance(e){
  e = e.parentElement; //get the parent of the <td>.
  e = e.children[2]; //get the 3rd <td> of that <tr>.
  //finally copy the textContent to the value attribute.
  document.getElementById(inputboxId).setAttribute('value', e.textContent);
  //e.innerText for older browsers.
}

在第 4 列单元格上放置一个 onclick 事件处理程序。

<td onclick='getBalance(this)'>X</td>

Answer 2

假设 jQuery：

$('table input[type="checkbox"]').click(function() {
    var curBalance=new Number($("#textbox").val());
    var rowBalance=new Number($(this).parent().prev().text());

    var newNum=0;
    if (this.checked) newBalance=curBalance+rowBalance;
    else newBalance=curBalance-rowBalance;

    $("#textbox").val(newBalance);
});