innerHTML firstChild.value适用于IE9 IE8但不适用于IE10,Firefox,Chrome

时间:2013-05-03 23:37:26

标签: javascript html internet-explorer

以下代码适用于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>

1 个答案:

答案 0 :(得分: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()定义了两次,级别上的标记而不是/,缺少结束,等等......请考虑重写整个事情。