Как обновить таблицу html из списка - PullRequest
Новая
       1

Как обновить таблицу html из списка

0 голосов
/ 06 марта 2020

У меня есть таблица html, которую я хочу обновить, когда пользователь выбирает значение из списка.

Вот мой список и таблица

Listbox with 4 column table

Вот мой код 

<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 * пакетов) и столбец комиссии для вычисления (цена1 * процент1).

Столбцы Pack и Percent имеют значения stati c.

Я знаю, что выше это bu sh, но ... я просто не могу выяснить это. У меня было jQuery, заполняющее промежутки, но у него был способ запутаться, чтобы следить и публиковать здесь.

(Фактическая таблица имеет 100 строк.)

Спасибо.

1 Ответ

1 голос
/ 06 марта 2020

Используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...