第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用javascript計算動態(tài)添加行中最后一列的總和

使用javascript計算動態(tài)添加行中最后一列的總和

慕斯王 2023-05-11 14:04:28
我有一個表，用戶可以根據(jù)需要動態(tài)添加一行。我需要在表格下方添加一個文本框，該文本框?qū)⑹褂?JavaScript 動態(tài)輸出最后一列的總數(shù)。如果無法動態(tài)完成計算，那么我可以在文本框下方添加一個計算按鈕<HTML><HEAD>    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>     <SCRIPT language="javascript">function addRow(tableID) {    var table = document.getElementById(tableID);    var rowCount = table.rows.length;    if (rowCount < 4) { // limit the user from creating fields more than your limits        var row = table.insertRow(rowCount);        var colCount = table.rows[0].cells.length;        row.id = 'row_'+rowCount;        for (var i = 0; i < colCount; i++) {            var newcell = row.insertCell(i);            newcell.outerHTML = table.rows[0].cells[i].outerHTML;                    }       var listitems= row.querySelectorAll("input, select");                   for (i=0; i<listitems.length; i++) {              listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");            }              } else {        alert("Maximum Passenger per ticket is 4.");    }}function calculate(elementID) {    var mainRow = document.getElementById(elementID);    var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;    var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value;    var total = mainRow.querySelectorAll('[name=total]')[0];    var myResult1 = myBox1 * myBox3;    total.value = myResult1;}任何幫助將不勝感激。
查看完整描述

2 回答

?
Helenr

TA貢獻1780條經(jīng)驗 獲得超4個贊

在這里試試這個。

我首先添加了總和tfoot，但是添加新行的方式讓它變得很尷尬，所以我只是把它放在表格底部的一個 div 中。


<html>

  <head>

    <title>Add/Remove dynamic rows in HTML table</title>


    <script language="javascript">

      function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;

        if (rowCount < 4) {

          // limit the user from creating fields more than your limits

          var row = table.insertRow(rowCount);


          var colCount = table.rows[0].cells.length;

          row.id = "row_" + rowCount;

          for (var i = 0; i < colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.outerHTML = table.rows[0].cells[i].outerHTML;

          }

          var listitems = row.querySelectorAll("input, select");


          for (i = 0; i < listitems.length; i++) {

            listitems[i].setAttribute("oninput", "calculate('" + row.id + "')");

          }

        } else {

          alert("Maximum Passenger per ticket is 4.");

        }

      }

      function calculate(elementID) {

        var mainRow = document.getElementById(elementID);

        var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value;

        var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value;

        var total = mainRow.querySelectorAll("[name=total]")[0];

        var myResult1 = myBox1 * myBox3;

        total.value = myResult1;


        // calculate the totale of every total

        var sumContainer = document.getElementById("totalOfTotals");

        var totalContainers = document.querySelectorAll("[name=total]"),

          i;

        var sumValue = 0;

        for (i = 0; i < totalContainers.length; ++i) {

          sumValue += parseInt(totalContainers[i].value);

        }

        sumContainer.textContent = sumValue;

      }

    </script>

  </head>

  <body>

    <input type="button" value="Add" onClick="addRow('dataTable')" />


    <table id="dataTable" class="form" border="1">

      <tbody>

        <tr id="row_0">

          <p>

            <td>

              <label>Quantity</label>

              <input

                type="number"

                required="required"

                name="qty"

                oninput="calculate('row_0')"

              />

            </td>


            <td>

              <label for="sel">Price</label>

              <select name="sel" id="sel" oninput="calculate('row_0')" required>

                <option value="" disabled selected>Choose your option</option>

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

              </select>

            </td>

            <td>

              <label for="total">Total</label>

              <input

                type="text"

                required="required"

                class="small"

                name="total"

              />

            </td>

          </p>

        </tr>

      </tbody>

    </table>

    <div>

      <tr>

        <span>Sum</span>

        <span id="totalOfTotals">0</span>

      </tr>

    </div>

  </body>

</html>


查看完整回答
反對 回復(fù) 2023-05-11
?
BIG陽

TA貢獻1859條經(jīng)驗 獲得超6個贊

我相信您想獲得整個表中最后一列的總值。


然后我認為您需要迭代列。使用下面的功能代碼。


function totalvalues() {

  var table = document.getElementById("dataTable");

  var totalcellvalue = 0;

  for (var i = 0, row; row = table.rows[i]; i++) {

    //rows would be accessed using the "row" variable assigned in the for loop

    for (var j = 0, col; col = row.cells[j]; j++) {

      //columns would be accessed using the "col" variable assigned in the for loop

      if (j == 2) {

        //alert('col html>>'+col.children[1].value);

        totalcellvalue += parseInt(col.children[1].value);

      }

    }

  }

  console.log(totalcellvalue);

}


// And I have called the above method ```totalvalues()`` in your ```calculate()``` method.

<HTML>


<HEAD>

  <TITLE> Add/Remove dynamic rows in HTML table </TITLE>


  <SCRIPT language="javascript">

    function addRow(tableID) {

      var table = document.getElementById(tableID);

      var rowCount = table.rows.length;

      if (rowCount < 4) { // limit the user from creating fields more than your limits

        var row = table.insertRow(rowCount);


        var colCount = table.rows[0].cells.length;

        row.id = 'row_' + rowCount;

        for (var i = 0; i < colCount; i++) {

          var newcell = row.insertCell(i);

          newcell.outerHTML = table.rows[0].cells[i].outerHTML;

        }

        var listitems = row.querySelectorAll("input, select");


        for (i = 0; i < listitems.length; i++) {

          listitems[i].setAttribute("oninput", "calculate('" + row.id + "')");

        }


      } else {

        alert("Maximum Passenger per ticket is 4.");


      }

    }


    function calculate(elementID) {

      var mainRow = document.getElementById(elementID);

      var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;

      var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value;

      var total = mainRow.querySelectorAll('[name=total]')[0];

      var myResult1 = myBox1 * myBox3;

      total.value = myResult1;

      totalvalues();// calling my function here

    }

  </SCRIPT>

</HEAD>


<BODY>


  <input type="button" value="Add" onClick="addRow('dataTable')" />


  <table id="dataTable" class="form" border="1">

    <tbody>

      <tr id='row_0'>

        <p>

          <td>

            <label>Quantity</label>

            <input type="number" required="required" name="qty" oninput="calculate('row_0')">

          </td>


          <td>

            <label for="sel">Price</label>

            <select name="sel" id="sel" oninput="calculate('row_0')" required>

              <option value="" disabled selected>Choose your option</option>

              <option value="1">1</option>

              <option value="2">2</option>

              <option value="3">3</option>

              <option value="4">4</option>

            </select>

          </td>

          <td>

            <label for="total">Total</label>

            <input type="number" required="required" class="small" name="total">

          </td>

        </p>

      </tr>

    </tbody>

  </table>

</BODY>


</HTML>


查看完整回答
反對 回復(fù) 2023-05-11
  • 2 回答
  • 0 關(guān)注
  • 197 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號