时间戳

首页 > 解决方案 > 如何从列表框中更新 html 表格

javascript - 如何从列表框中更新 html 表格

问题描述

当用户从列表框中选择一个值时，我有一个要更新的 html 表。

这是我的列表框和表格

带有 4 列表格的列表框

这是我的代码

<html>
<head>
<title>Table</title>
<style>
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}   
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<br><br>
<b>Price Per Pack: $</b>
<select name="listbox_name id="listbox_name" size="number_of_options">
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
</select>

<br><br>
<table width='300'>
    <tr bgcolor='lightblue'>
        <td width='50'><b>Packs</b></td>
        <td width='60'><b>$ Price</b></td>
        <td width='60'><b>%</b></td>
        <td width='60'><b>Comission</b></td>
    </tr>
    <tr>
        <td><span id='packs1'>1</span></td>
        <td>$<span id='price1'>listbox_name(value*1)</span></td>
        <td><span id='percent1'>5.0%</span></td>
        <td>$<span id='commission1'>getCommission(price1*percent1)</span></td>
    </tr>
    <tr>
        <td><span id='packs2'>2</span></td>
        <td>$<span id='packs2'>listbox_name(value*packs2)</span></td>
        <td><span id='price2'>5.2%</span></td>
        <td>$<span id='commission2'>getCommission(price2*percent2)</span></td>
    </tr>
    <tr>
        <td><span id='packs3'>3</span></td>
        <td>$<span id='packs3'>listbox_name(value*packs3)</span></td>
        <td><span id='price3'>5.4%</span></td>
        <td>$<span id='commission3'>getCommission(price3*percent3)</span></td>
    </tr>
</table>

当用户从列表框中选择 45 时，如何更改价格列以计算选择 (45*packs) 和佣金列以计算 (price1*percent1)。

Pack 和 Percent 列是静态值。

我知道上面是灌木，但是......我就是想不通。我有 jQuery 填充跨度，但它的方式很混乱，无法关注并在此处发布。

（实际表有 100 行。）

谢谢。

标签： javascriptjqueryhtmlcssajax

解决方案

使用 jQuery，您可以做到这一点，它是 jQuery 的一个优点，可以使用next函数连续选择下一个元素，请参阅工作答案。

$(document).ready(function(){
  $("#listbox_name").on('change',function(){
      var currentval=$(this).val()
      $("table tr td:first-child").each(function(){
         var currentObj=$(this);
         var value=parseInt(currentObj.text());
         if(!isNaN(value)){
            var newprice=parseInt(currentval) * value;
            currentObj.next().text(newprice);
            var percentage=currentObj.next().next().text();
            var percent=percentage.substr(0,percentage.indexOf("%"));
            var comission=parseFloat(parseFloat(percent).toFixed(1) * .01 * parseFloat(newprice).toFixed(1)).toFixed(2);
            currentObj.next().next().next().text(comission)
            
         }
      })
      
  })
$("#listbox_name").trigger('change')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Table</title>
<style>
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}   
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<br><br>
<b>Price Per Pack: $</b>
<select name="listbox_name" id="listbox_name" size="number_of_options">
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
</select>

<br><br>
<table width='300'>
    <tr bgcolor='lightblue'>
        <td width='50'><b>Packs</b></td>
        <td width='60'><b>$ Price</b></td>
        <td width='60'><b>%</b></td>
        <td width='60'><b>Comission</b></td>
    </tr>
    <tr>
        <td><span id='packs1'>1</span></td>
        <td>$<span id='price1'>listbox_name(value*1)</span></td>
        <td><span id='percent1'>5.0%</span></td>
        <td>$<span id='commission1'>getCommission(price1*percent1)</span></td>
    </tr>
    <tr>
        <td><span id='packs2'>2</span></td>
        <td>$<span id='packs2'>listbox_name(value*packs2)</span></td>
        <td><span id='price2'>5.2%</span></td>
        <td>$<span id='commission2'>getCommission(price2*percent2)</span></td>
    </tr>
    <tr>
        <td><span id='packs3'>3</span></td>
        <td>$<span id='packs3'>listbox_name(value*packs3)</span></td>
        <td><span id='price3'>5.4%</span></td>
        <td>$<span id='commission3'>getCommission(price3*percent3)</span></td>
    </tr>
</table>

推荐阅读