0

ユーザーが表のセルに変更を加えるたびに、「新規」列の下の合計値を動的に更新できるようにしたいと考えています。

ドム:

<div id='lc_adjustments'>
  <table id='adjustments' cellspacing='0' width='550px' class='lc_nf' border='0'
  cellpadding='0'>
    <tbody>
      <tr>
        <td>
          <table cellspacing='0' width='100%' class='lcb' border='0' cellpadding='0'>
            <tr>
              <td>
                <table cellspacing='1' width='100%' class='ibody' border='0' cellpadding='0'>
                  <colgroup>
                    <col width='250px'></col>
                    <col width='150px'></col>
                    <col width='150px'></col>
                  </colgroup>
                  <tr class='header'>
                    <td>Item Name</td>
                    <td>Current Value</td>
                    <td>New Value</td>
                  </tr>
                  <tr onmouseover='high(this);' class='even' onmouseout='low(this);'>
                    <td class='cl'>Item number 1</td>
                    <td class='cl'>89.50</td>
                    <td class='cl'>
                      <input class='clsMandatoryReal' onchange='getTotal();' id='totalable'
                      value='89.50' size='25' type='text'>
                    </td>
                  </tr>
                  <tr onmouseover='high(this);' class='odd' onmouseout='low(this);'>
                    <td class='cl'>Item number 2</td>
                    <td class='cl'>69.70</td>
                    <td class='cl'>
                      <input class='clsMandatoryReal' onchange='getTotal();' id='totalable'
                      value='69.70' size='25' type='text'>
                    </td>
                  </tr>
                  <tr onmouseover='high(this);' style='font-weight: bold;' onmouseout='low(this);'
                  class='even'>
                    <td class='cl'>TOTAL STOCK MASS</td>
                    <td class='cl'>?</td>
                    <td class='cl'>?</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

私はjqueryでこれをやろうとしましたが、私の機能はうまくいかないようです:

function getTotal() {

  var total = 0.0;

  //iterate over each of the cells
  $('table.ibody tbody tr').
  children('td.cl').
  children('input#totalable:not(:last)').each(function () {

    total += $(this).text();
  });

  $('table.ibody tbody tr').
  children('td.cl').
  children('input#totalable:last)').value = total;

  alert(total);

}

私は、jquery または javascript のいずれかのソリューションを受け入れています。html は Struts によって部分的に生成されます。つまり、ほとんどの場合、html の class/id 属性についてできることはあまりありません。

4

2 に答える 2

2

jQuery の代替案は次のとおりです。

var total = 0;

//Iterate all td's in second column
$('#adjustments>tbody>tr>td:nth-child(2)').each( function(){
   total += parseFloat($(this).text()) || 0;       
});

alert(total)
于 2013-01-14T15:37:03.493 に答える
0

これは最終的に私のために働いた：

関数 getTotal(){

         var total = 0.0;

         $('table.ibody tbody tr').
         children('td.cl').
         children('input#totalable').each(function(){ 
             total += parseFloat(this.value);
         });

         $('table.ibody tbody tr').
         children('td.cl').
         children('div#totalable').html(total);

         alert(total);

}
于 2013-01-15T16:41:14.450 に答える