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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在表上創(chuàng)建新行時(shí)功能不起作用

在表上創(chuàng)建新行時(shí)功能不起作用

手掌心 2021-11-18 09:54:17
我有一個(gè) html 表,當(dāng)用戶單擊按鈕時(shí),我會(huì)在其中動(dòng)態(tài)添加行。我的表格每行的兩個(gè)單元格的編號(hào)應(yīng)該相乘。我做了一個(gè)可以乘以 2 個(gè)單元格數(shù)字的函數(shù),但是當(dāng)我通過按下add button該函數(shù)創(chuàng)建一個(gè)新行時(shí),該函數(shù)在新行上不起作用,它總是在表格的第一行上起作用。這是 HTML 代碼:<div class="table-responsive container">    <table class="table">        <thead class="dark">        <tr>            <th scope="col">SL.</th>            <th scope="col">Item Description</th>            <th scope="col">Price</th>            <th scope="col">Qty.</th>            <th scope="col">Total</th>            <th scope="col">Del</th>        </tr>        </thead>        <tbody>        <tr>            <th scope="row">1</th>            <td><label>                <input type="text" name="name">            </label>            </td>            <td><label>                <input type="text" id="price" oninput="calculate()">            </td>            <td>                <input type="text" id="qt" oninput="calculate()">            </td>            <td>                <input type="text" id="ttl" name='total'>            </td>            <td>                <button class="remove">-</button>            </td>        </tr>        </tbody>    </table>    <button id="addRow">+ Add</button></div>這是 JavaScript 代碼:let temp_td = '<tr>' +    '<th scope="row">1</th>' +    '<td><label><input type="text" name="name"></label></td>' +    '<td><label><input type="text" id="price" oninput="calculate()"></td>' +    '<td><input type="text" id="qt" oninput="calculate()"></td>' +    '<td><input type="text" id="ttl" name="total"></td>' +    '<td><button class="remove">-</button></td>' +'</tr>';$(function () {    $('tbody').sortable();    $('#addRow').click(function () {        $('tbody').append(temp_td)    });    $(document).on('click', '.remove', function () {        $(this).parents('tr').remove();    });    $('#getValues').click(function () {        const total = [];        let sum = 0;        $('input[name="total"]').each(function (i, elem) {            total.push($(elem).val())        });我試圖改變很多東西,但它不起作用。
查看完整描述

1 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您不能在 HTML 中復(fù)制 ID。您可以將行號(hào)保存在每次添加新行時(shí)遞增的變量中,并使用該變量生成 ID:


$(function() {

  let row = 1;


  $('#addRow').click(function() {

    row++;

    let temp_td = '<tr><th scope="row">' + row + '</th><td><label><input type="text" name="name"></label></td><td><label><input type="text" id="price' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="qt' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="ttl' + row + '" name="total"></td><td><button class="remove">-</button></td></tr>';

    $('tbody').append(temp_td)

  });


  $(document).on('click', '.remove', function() {

    $(this).parents('tr').remove();

  });

});


function calculate(r) {

  var price = document.getElementById('price' + r).value;

  var qt = document.getElementById('qt' + r).value;

  var ttl = document.getElementById('ttl' + r);

  var multiply = price * qt;

  ttl.value = multiply;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="table-responsive container">

  <table class="table">

    <thead class="dark">

      <tr>

        <th scope="col">SL.</th>

        <th scope="col">Item Description</th>

        <th scope="col">Price</th>

        <th scope="col">Qty.</th>

        <th scope="col">Total</th>

        <th scope="col">Del</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td><label>

                    <input type="text" name="name">

                </label>

        </td>

        <td><label>

                    <input type="text" id="price1" oninput="calculate(1)">

                </td>

                <td>

                    <input type="text" id="qt1" oninput="calculate(1)">

                </td>

                <td>

                    <input type="text" id="ttl1" name='total'>

                </td>

                <td>

                    <button class="remove">-</button>

                </td>

            </tr>

            </tbody>

        </table>

        <button id="addRow">+ Add</button>


如果您愿意,您也可以對(duì)名稱執(zhí)行此操作。我在上面的代碼中沒有這樣做,因?yàn)樗鼘?duì)于這個(gè)答案不是必需的。


或者,您可以將元素本身傳遞給calculate()函數(shù),然后使用 jQuery 查找其他“兄弟”元素。所以你根本不需要身份證。


查看完整回答
反對(duì) 回復(fù) 2021-11-18
  • 1 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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