一行的列总和

Question

我想在向该字段插入值期间在每一行的文本框字段中添加列值，并在只读字段中显示该值。

HTML CODE:

    <form action="" method="post">
<table class="table-responsive">
                          <thead>
                            <tr>

                              <th style="width: 10%;">Task Name</th>
                              <th style="width: 10%;">Task Code</th>
                              <th style="width: 10%;">LDR</th>
                              <th style="width: 10%;">SDR</th>
                              <th style="width: 30%;">Total</th>
                             </tr>
                          </thead>
                          <?php
                           while($m_row = $m_result->fetch_assoc()) {
                          ?>
                          <tbody>
                          <tr>
                            <?php 
                                $sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
                                $resulttask=$conn->query($sqltask);
                                $rowtask=$resulttask->fetch_assoc();
                                ?>

                                <td><?php echo $rowtask['tasks_name'] ?></td>
                            <td><?php echo $m_row['tcode'] ?></td>
                                <td>
                            <input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
                                </td>
                                <td>
                                        <input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
                                        </td>                                   
    <td>
    <input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />      
    </td>
    <td>  <input type="hidden"  name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
                     </tbody>
               <?php
                           }
                           ?>

               </table>
                        <div class="pull-right">
                        <input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
                      </div>

                    </div>
                  </div>
              </div>
              </form>

以上代码是文本框字段的 html 代码，其中字段 ldr、sdr 应该是求和以获得 master_diff 字段中的总和。它应该使用 onchange 事件，因为应该添加文本框字段的每个条目以显示最终总和。

Answer 1

您应该从循环中删除所有 ID！试试这个：

var inputs = document.getElementsByClassName("inputs");

var summDiff = function() {
    var tr = this.closest("tr");
    var ldr = tr.getElementsByClassName("ldr")[0]
    var sdr = tr.getElementsByClassName("sdr")[0]
    var diff = tr.getElementsByClassName("master_diff")[0]
    diff.value = parseInt(ldr.value) + parseInt(sdr.value)
    
};

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', summDiff, false);
}

<form action="" method="post">
  <table class="table-responsive">
    <thead>
      <tr>
        <th style="width: 10%;">Task Name</th>
        <th style="width: 10%;">Task Code</th>
        <th style="width: 10%;">LDR</th>
        <th style="width: 10%;">SDR</th>
        <th style="width: 30%;">Total</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>task 1</td>
        <td>0001</td>
        <td>
          <input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
        </td>
        <td>
          <input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
        </td>                                   
        <td>
          <input type="number" class="form-control master master_diff" name="master_diff[]" readonly />      
        </td>
        <td>  
          <input type="hidden"  name="master[]"  value="1" />
        </td>
      </tr>
       <tr>
        <td>task 2</td>
        <td>0002</td>
        <td>
          <input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
        </td>
        <td>
          <input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
        </td>                                   
        <td>
          <input type="number" class="form-control master master_diff" name="master_diff[]" readonly />      
        </td>
        <td>  
          <input type="hidden"  name="master[]"  value="2" />
        </td>
      </tr>
       <tr>
        <td>task 3</td>
        <td>0003</td>
        <td>
          <input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
        </td>
        <td>
          <input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
        </td>                                   
        <td>
          <input type="number" class="form-control master master_diff" name="master_diff[]" readonly />      
        </td>
        <td>  
          <input type="hidden"  name="master[]"  value="3" />
        </td>
      </tr>
    </tbody>
  </table>
  <div class="pull-right">
    <input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
  </div>
</form>

一行的列总和

Total sum of columns of one row

html

javascript

onchange