CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Proventus
Proventus

Reputation: 35

How to update an html table from a listbox

I have an html table I want to update when a user selects a value from a listbox.

Here is my listbox and table

Listbox with 4 column table

Here is my code

<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>

When a user selects 45 from the list box, how can I change the price column to calculate the selection (45*packs) and the commission column to calculate (price1*percent1).

The Pack and Percent columns are static values.

I know the above is bush but... I just can't figure this out. I had jQuery filling in the spans, but it got way way to messy to follow and post here.

(The actual table has 100 rows.)

Thanks.

Upvotes: 0

Views: 515

Answers (1)

Negi Rox
Negi Rox

Reputation: 3922

Using jQuery you can do that its a beauty of jQuery to select next element in a row using next function see working answer.

$(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>

Upvotes: 1

Related Questions