javascript - 处理表格中表格的每一行

Question

嗨，我有一个表格中的下表。

      <form id="eForm" action="">
                <table class="fMain" border="1" cellpadding="0" cellspacing="0">
              <tbody>        
              <tr class="ist">
                  <td>In work</td>
                  <td>09/25/2013</td>
                  <td><input type="text" value="3500.00" name="salesS" id="totalS" class="fo" readonly=""></td>                
                  <td ><input type="text" value="23.00" name="cusS" id="cusS" class="form-field-tiny readonly" readonly=""></td>
                  <td>0.66%</td>                                         
              </tr>
               <td>In work</td>
                  <td>09/25/2013</td>
                  <td><td id="salesS" style="tar">$345.00</td></td>                
                  <td id="custS" style="tar">$223.00</td>
                  <td>0.66%</td>                     
              </tr>                             
             </tbody>
           </table>
          </form>

在我的 jquery 部分中，我使用以下代码来迭代 throw 每一行。

 $('.fMain').each(function () {
                var num = document.getElementById('totalS').innerHtml;
                var cNum = document.getElementById('cusS').innerHtml;
                alert(num);
                alert(cNum);
                formatCurrency(num, cNum);
            });

当它运行时，我可以看到 .each 经历了行数，但由于某种原因，num 和 cNum 的值与第一行相同。这里有什么问题？帮我修。谢谢

Answer 1

而不是document.getElementById('totalS')只选择具有给定 id 的元素，this用于获取当前行。

this.innerHTML;

Answer 2

原因是你通过 id 得到它。在 html 中，您不应该有许多具有相同 id 的元素。浏览器只是首先返回找到的给你。

Answer 3

首先更正您的 HTML 标记，所有标签均未正确关闭

其次，只使用一个 jquery 或 javascript 作为您的选择

jQuery 解决方案

$('#eForm table tr').each(function () {
            alert($('#totalS').val());
            alert($('#cusS').val());

             //your processing here
    });

演示小提琴

Answer 4

• 使用.valuenotinnerHTML获取<input>值：

  var num = document.getElementById('totalS').value; var cNum = document.getElementById('cusS').value;

• 此外，您的桌子缺少一个<tr>，并且<td>内部有一个<td>. 对我来说，这看起来像是无效的标记。

• 使用它来获取 rowrs 的对象数组：$('.fMain tr')不仅仅是$('.fMain')

Answer 5

试试这个：

$('#eForm table tr').each(function () {
         var ts = $(this).find('#totalS').val();
});

Answer 6

需要使用class属性而不是idforinput标签

    <form id="eForm" action="">
            <table class="fMain" border="1" cellpadding="0" cellspacing="0">
          <tbody>        
          <tr class="ist">
              <td>In work</td>
              <td>09/25/2013</td>
              <td><input type="text" value="3500.00" name="salesS" class="totalS fo" readonly=""></td>                
              <td ><input type="text" value="23.00" name="cusS" class="cusS form-field-tiny readonly" readonly=""></td>
              <td>0.66%</td>                                         
          </tr>
          <tr> <!-- missing tr tag here -->
           <td>In work</td>
              <td>09/25/2013</td>
              <td><td id="salesS" style="tar">$345.00</td></td>                
              <td id="custS" style="tar">$223.00</td>
              <td>0.66%</td>                     
          </tr>                             
         </tbody>
       </table>
      </form>



$('.fMain tr.ist').each(function () {
            var num = $(this).find('.totalS').val();
            var cNum = $(this).find('.cusS').val();
            alert(num);
            alert(cNum);
            formatCurrency(num, cNum);
        });