Question

任何人都可以帮助我解决我的问题。我有这样的桌子：

<table id="initable" border="1">
    <thead>
        <th>Code</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr data-code="F01" data-price-max="1700000">
            <td>F01</td>
            <td>
                <input type="text" class="sw-nml val-F01" name="content[0][nominal]" value="1.000" readonly="" style="width: 100px; text-align: right;">
            </td>
        </tr>
        <tr data-code="F01" data-price-max="1700000">
            <td>F01</td>
            <td>
                <input type="text" class="sw-nml val-F01" name="content[0][nominal]" value="2.000" readonly="" style="width: 100px; text-align: right;">
            </td>
        </tr>
        <tr data-code="F02" data-price-max="1000000">
            <td>F02</td>
            <td>
                <input type="text" class="sw-nml val-F02" name="content[0][nominal]" value="3.000" readonly="" style="width: 100px; text-align: right;">
            </td>
        </tr>
        <tr data-code="F02" data-price-max="1000000">
            <td>F02</td>
            <td>
                <input type="text" class="sw-nml val-F02" name="content[0][nominal]" value="8.000" readonly="" style="width: 100px; text-align: right;">
            </td>
        </tr>
        <tr data-code="F01" data-price-max="1700000">
            <td>F01</td>
            <td>
                <input type="text" class="sw-nml val-F01" name="content[0][nominal]" value="9.000" readonly="" style="width: 100px; text-align: right;">
            </td>
        </tr>
    </tbody>
</table>

我想根据data-code属性对所有值求和，如果总和结果超过data-price-max，它将显示“价格太高” 。

>

结果如下：

Answer 1

参考

https://api.jquery.com/data/

结合一些数学就可以做到。

Answer 2

您好，如果您在这里，有多种方法可以实现这一目标。

首先是要了解什么是数据属性以及您的目标是什么。

这是存储任意数据的一个很好的解释。 data() function和此处data attribute

然后您唯一需要做的就是获取值并与您的值进行比较

$(document).ready(function() {
  let totF01;
  let totF02;


  $('#initable > tbody  > tr').each(function() {

    let maxprice = $(this).attr("data-price-max");
    let inputvalue = $(".val-" + $(this).attr("data-code")).val();
    if ($(this).attr("data-code") == "F01") {
      console.log("add to f01");
      totF01 = totF01 + inputvalue;
    } else if ($(this).attr("data-code") == "F02") {
      totF02 = totF02 + inputvalue;
    }



    if (inputvalue < maxprice) {
      console.log("Price is ok!");
    }else{
       console.log("Price is too much!");
    }

  });

  $("#totF01").html("$");//
  $("#totF02").html("$");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="initable" border="1">
  <thead>
    <th>Code</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr data-code="F01" data-price-max="16660000">
      <td>F01</td>
      <td>
        <input type="text" class="sw-nml val-F01" name="content[0][nominal]" value="17000" readonly="" style="width: 100px; text-align: right;">
      </td>
    </tr>
    <tr data-code="F02" data-price-max="1700000">
      <td>F02</td>
      <td>
        <input type="text" class="sw-nml val-F02" name="content[0][nominal]" value="27000" readonly="" style="width: 100px; text-align: right;">
      </td>
    </tr>
    <tr data-code="F03" data-price-max="1000000">
      <td>F03</td>
      <td>
        <input type="text" class="sw-nml val-F03" name="content[0][nominal]" value="37000" readonly="" style="width: 100px; text-align: right;">
      </td>
    </tr>
    <tr data-code="F04" data-price-max="4000">
      <td>F04</td>
      <td>
        <input type="text" class="sw-nml val-F04" name="content[0][nominal]" value="87000" readonly="" style="width: 100px; text-align: right;">
      </td>
    </tr>
    <tr data-code="F05" data-price-max="17000">
      <td>F05</td>
      <td>
        <input type="text" class="sw-nml val-F05" name="content[0][nominal]" value="97000" readonly="" style="width: 100px; text-align: right;">
      </td>
    </tr>
    
  </tbody>
</table>

然后您可以轻松地在表的页脚添加两个tr并添加结果并进行任何操作。

如何对具有不同属性名称的所有值求和

2 个答案: