-2

以下代码适用于 IE8,9 但不适用于 IE10、Firefox 或 chrome。计算在 IE8、9 和旧版本中是正确的，但在 IE10、FF、chrome 中，相应列和行中的计算值显示为 NaN。我已经提供了完整的代码。任何帮助将不胜感激。谢谢大家。

<html>
   <head></head>
   <script type="text/javascript">
      function enable_text(che, inp, cost) {

         if (che.checked) {
            var c = inp;
            var d = cost;
            document.getElementById('gate_req_' + c).value = d;
         }
         else {
            var c = inp;
            var d = cost;
            document.getElementById('gate_req_' + c).value = 0;
         }
      }
   </script>
   <body>
      <form action="" method="post" name="f1" id="f1">
         <table width='95%' border='1' id='tableId' name='tableId'>
            <tr>
               <td>A</td>
               <td>B</td>
               <td>C</td>
               <td>D</td>
               <td>E</td>
               <td>Cost</td>
               <td>discount yes/ no</td>
               <td>Discount amount</td>
               <td>Subtotal (Cost - Discount Amount)</td>
            </tr>
            <tr>
               <td>J</td>
               <td>K</td>
               <td>L</td>
               <td>M</td>
               <td bgcolor='#F4F4F4'>N</td>
               <td id='enteredValues'>
                  <input name='CourseCost' readonly size='6' value=1600>
               </td>
               <td>
                  <input type='checkbox' name='check_box_[]' value=1819 onclick='enable_text(this,0,1600);calc();  ' />

                  <input type='hidden' name='check_box_uncheck[]' value=1819
                     />
               </td>
               <td id='enteredValues'>
                  <input type='text' name='gate_req_[]' value='0' readonly id='gate_req_0' />
               </td>
               <td id='enteredValues'>&nbsp;   </td>
            </tr>
            <tr>
               <td>O</td>
               <td>P</td>
               <td>Q</td>
               <td>R</td>
               <td bgcolor='#F4F4F4'>S</td>
               <td id='enteredValues'>
                  <input name='CourseCost' readonly size='6' value=1600>
               </td>
               <td>
                  <input type='checkbox' name='check_box_[]' value=1821 onclick='enable_text(this,1,1600);calc();  ' />

                  <input type='hidden' name='check_box_uncheck[]' value=1821
                     />
               </td>
               <td id='enteredValues'>
                  <input type='text' name='gate_req_[]' value='0' readonly id='gate_req_1' />
               </td>
               <td id='enteredValues'>&nbsp;   </td>
            </tr>
            <tr>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td align='left'>Com</td>
               <td align='left'>
                  <input name='Registration_fee' type='text' value='200' size=6 readonly />
               </td>
               <td>&nbsp;</td>
               <td>
                  <input name='Registration0fee' value='0' size=6 readonly />
               </td>
               <td align='left'>
                  <input name='Registration_fee' value='200' size=6 />
               </td>
            </tr>
            <tr id='columnTotals' name='columnTotals'>
               <td>&nbsp; </td>
               <td>&nbsp;</td>
               <td>&nbsp;  </td>
               <td>&nbsp;  </td>
               <td>= N +S + Com</td>
               <td>
                  <input id='sum1' name='sum1' type='text' readonly>
               </td>
               <td>&nbsp;  </td>
               <td>
                  <input id='sum2' name='sum2' type='text' readonly>
                  = Discount Amount Subtotal
               </td>
               <td>
                  <input id='sum3' type='text' name='sum3' readonly>
                  = Total
               </td>
         </table>
   </body>
   <script type="text/javascript">
      window.onload = function () {
         var enteredValues = document.getElementById("tableId");
         var inputs = enteredValues.getElementsByTagName("input");
         var columnTotals = document.getElementById("columnTotals");

         (function calc() {
            var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
            for (var i = 1; i < enteredValues.rows.length - 1; i++) {
               var cells = enteredValues.rows[i].cells;
               col_1_total += Number(cells[5].firstChild.value);
               col_2_total += Number(cells[7].firstChild.value);
               col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
            }
            document.getElementById("sum1").setAttribute("value", col_1_total)
            document.getElementById("sum2").setAttribute("value", col_2_total)
            document.getElementById("sum3").setAttribute("value", col_3_total)

         })();//execute calc() immediately to cater for any initial values

         for (var i = 1; i < inputs.length - 1; i++) {
            inputs[i].onchange = calc;
         }//attach calc as onblur handler to input fields.
      };
   </script>

   <script>
      function calc() {
         var enteredValues = document.getElementById("tableId");
         var inputs = enteredValues.getElementsByTagName("input");
         var columnTotals = document.getElementById("columnTotals");
         var col_1_total = 0, col_2_total = 0, col_3_total = 0;//initialise running totals to zero
         for (var i = 1; i < enteredValues.rows.length - 1; i++) {
            var cells = enteredValues.rows[i].cells;
            col_1_total += Number(cells[5].firstChild.value);
            col_2_total += Number(cells[7].firstChild.value);
            col_3_total += Number(cells[8].innerHTML = cells[5].firstChild.value - cells[7].firstChild.value);
         }
         document.getElementById("sum1").setAttribute("value", col_1_total)
         document.getElementById("sum2").setAttribute("value", col_2_total)
         document.getElementById("sum3").setAttribute("value", col_3_total)
      }
   </script>
</html>
4

1 回答 1

1 
col_1_total += Number(cells[5].getElementsByTagName("input")[0].value);
col_2_total += Number(cells[7].getElementsByTagName("input")[0].value);
col_3_total += Number(cells[8].innerHTML = cells[5].getElementsByTagName("input")[0].value - cells[7].getElementsByTagName("input")[0].value);

firstChild是一个文本节点（由 和 之间的空格引起<td>）<input>，而不是您显然想要的输入元素。

此外，您的代码非常多余，并且不是完全有效的 html - calc() 定义了两次，级别上的标签而不是 /，缺少关闭等等......请考虑重写整个事情。

于 2013-05-04T00:21:51.380 回答