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

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

動(dòng)態(tài)表格如果復(fù)選框?yàn)榭?) td單元格與JS

動(dòng)態(tài)表格如果復(fù)選框?yàn)榭?) td單元格與JS

動(dòng)漫人物 2023-09-18 17:27:57
我有一個(gè)動(dòng)態(tài)表,在一個(gè) td 中傳遞 php 價(jià)格值,表末尾是這些價(jià)格的總和。每行還有一個(gè)復(fù)選框默認(rèn)選中。我需要清空未選中復(fù)選框的行的內(nèi)容,以便從總和計(jì)算中刪除該價(jià)格值。問題是,這會消除該值嗎?我知道將 td 字段設(shè)置為隱藏不會。值單元格:<td style="width:10%" class="rowDataSd" id="value">    <?php echo     str_replace(array(".", ",",), array("", "."), $row['rad_iznos']);    ?></td>復(fù)選框單元格:<td style="width:3%"><input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>"></td>我嘗試過這個(gè),但沒有發(fā)生任何錯(cuò)誤:      $(document).ready(function(){    if($("#remove").is(':checked')) {        $("#value").show();    } else {        $("#value").empty();    }     });我可以將唯一值傳遞到每個(gè)復(fù)選框并將值元素傳遞到 id 中,如下所示:id="<?php echo $row['rad_id']?>"。所以他們互相聯(lián)系,但不知道如何在 JS 中說清空這些元素。我也在考慮類似的事情,如果在某些行復(fù)選框未選中空最接近的 td 且 id="value"。我的猜測是這將是最好的解決方案,但我不知道如何寫?;蛘?,即使未選中復(fù)選框,也將 css 類 .rowDataSd 刪除到最接近的 td,id="vale" 根據(jù)計(jì)算對象進(jìn)行計(jì)算。求和腳本:       var totals=[0,0,0];        $(document).ready(function(){            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");            $dataRows.each(function() {                $(this).find('.rowDataSd').each(function(i){                            totals[i]+=parseFloat( $(this).html());                });            });            $("#sum_table td.totalCol").each(function(i){                  $(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>');            });        });如圖所示,如果未選中復(fù)選框,則需要從計(jì)算中刪除行。請記住,我不想刪除行,只需將其刪除我們的計(jì)算即可。任何有關(guān)如何解決此問題的幫助都將受到贊賞。
查看完整描述

2 回答

?
侃侃爾雅

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

這是一個(gè)基本示例。


$(function() {

  function getPrice(row) {

    var txt = $(".price", row).text().slice(1);

    var p = parseFloat(txt);

    return p;

  }


  function calcSum(t) {

    var result = 0.00;

    $("tbody tr", t).each(function(i, r) {

      if ($("input", r).is(":checked")) {

        result += getPrice(r);

      }

    });

    return result;

  }


  function updateSum(tbl) {

    var t = calcSum(tbl);

    $("tfoot .total.price", tbl).html("$" + t.toFixed(2));

  }


  updateSum($("#price-list"));


  $("#price-list input").change(function() {

    updateSum($("#price-list"));

  });

});

#price-list {

  width: 240px;

}


#price-list thead th {

  width: 33%;

  border-bottom: 1px solid #ccc;

}


#price-list tfoot td {

  border-top: 1px solid #ccc;

}

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

<table id="price-list">

  <thead>

    <tr>

      <th>Name</th>

      <th>Price</th>

      <th>&nbsp;</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="item name">Item 1</td>

      <td class="item price">$3.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

    <tr>

      <td class="item name">Item 2</td>

      <td class="item price">$4.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

    <tr>

      <td class="item name">Item 3</td>

      <td class="item price">$5.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Sum</td>

      <td class="total price">$0.00</td>

      <td>&nbsp;</td>

    </tr>

  </tfoot>

</table>


查看完整回答
反對 回復(fù) 2023-09-18
?
楊__羊羊

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

這一切都?xì)w結(jié)為為復(fù)選框設(shè)置事件處理程序。事件處理程序應(yīng)執(zhí)行以下操作:

  • 跟蹤checkbox change所有復(fù)選框的事件和DOM ready事件

  • 計(jì)算選中復(fù)選框的所有行的總和

  • 將總計(jì)設(shè)置為總計(jì)元素

  • 它還調(diào)用對未選中的行執(zhí)行任何所需的更改..在下面的示例代碼中未完成

代碼

$(function() { 

    $('.select').on('change', function() {

        let total = $('.select:checked').map(function() {

            return +$(this).parent().prev().text();

        })

        .get()

        .reduce(function(sum, price) {

            return sum + price;

        });

        $('#total').text( total );

    })

    .change();//trigger the change event on DOM ready

});

片段

$(function() {

    $('.select').on('change', function() {

        let total = $('.select:checked').map(function() {

            return +$(this).parent().prev().text();

        })

        .get()

        .reduce(function(sum, price) {

            return sum + price;

        });

        $('#total').text( total );

    })

    .change();

});

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

<table>

<thead>

  <tr>

    <th>Item</th>

    <th>Price</th>

    <th>Select</th>

  </tr>

 </thead>

 <tbody>

  <tr>

    <td>Item 1</td>

    <td>1000</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 2</td>

    <td>1200</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 3</td>

    <td>800</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 4</td>

    <td>102000</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

</tbody>

</table>


<span>TOTAL</span><span id="total"></span>


查看完整回答
反對 回復(fù) 2023-09-18
  • 2 回答
  • 0 關(guān)注
  • 123 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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