Показ ячеек таблицы в зависимости от select

237

18 декабря 2017, 15:19

Доброго времени суток. Имеется следующая динамическая таблица через php:

<?
                    if(!empty($_POST['ch'])) {
                        echo '<table id="rowclick5" class="table table-striped table-hover table-responsive cursor">
                            <tr style="background-color: #f9f9f9;">
                                <th></th>
                                <th><center>Наименование</center></th>
                                <th><center>Цена грн.</center></th>
                                <th><center>Качество деталей</center></th>
                            </tr>';
                        foreach ($_POST['ch'] as $item) {
                            $query = mysqli_query($CONNECT, "SELECT * FROM `prices` WHERE `id` = '$item'");
                            while ($result = mysqli_fetch_assoc($query)) {
                                echo '<tr>
                                    <td><center><i class="fa fa-times" aria-hidden="true"></i></center></td>
                                    <td>'.$result['name'].'</td>
                                    <td id="priceor"><center>'.$result['priceor'].'</center></td>
                                    <td id="pricecopy"><center>'.$result['pricecopy'].'</center></td>
                                    <td>
                                    <center>
                                        <select class="form-control" id="selch">
                                                <option value="orig" selected>Оригинал</option>
                                                <option value="copy">Копия</option>
                                        </select>
                                    </center>
                                    </td>
                                </tr>';
                            }
                        }
                        echo '</table>';
                    } else {
                        echo 'Вы не выбрали ни одной позиции.';
                    }
                    ?>

Как мне сделать так, что-бы при select выборе допустим "Оригинал" - показывало в столбце "Цена" цену "оригинала" (priceor), а при выборе "Копия" - показывало только цену "копии" (pricecopy)? На разных наименованиях по своему должно показывать. Таблица динамическая и данные хранятся в БД. И желательно, что-бы ниже под таблицей выводилась "Общая сумма".

Answer 1

jQuery подход, с минимальными изменениями в html:

var $selch = $("select#selch"), 
    closest_price, 
    $prices = $(".price"), 
    $current_sum = $("#current-sum"); 
     
    currentSum(); 
 
$selch.change(function() { 
 
    closest_price = $(this).parent().parent("tr").find(".price"); 
     
    switch ( $(this).val() ) { 
        case "0": 
            closest_price.html(closest_price.data("price")); 
            currentSum(); 
            break; 
        case "1": 
            closest_price.html(closest_price.data("price-copy")); 
            currentSum(); 
            break; 
         default: 
            closest_price.html(closest_price.data("price")); 
            currentSum(); 
            break; 
    }  
     
}); 
 
function currentSum() { 
   
    var sum = 0; 
     
    $prices.each(function() { 
        sum += parseFloat($(this).html()); 
    }) 
     
    $current_sum.html(sum); 
     
}

table tr:nth-child(even){ 
    background-color:lightgreen; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
    <tr> 
        <th></th> 
        <th>Наименование</th> 
        <th>Цена грн.</th> 
        <th>Качество деталей</th> 
        <th></th> 
    </tr> 
    <tr> 
        <td></td> 
        <td>1</td> 
        <td class="price" data-price="100" data-price-copy="99">100</td> 
        <td>10</td> 
        <td> 
            <select class="form-control" id="selch"> 
                <option value="0" selected>Оригинал</option> 
                <option value="1">Копия</option> 
            </select> 
        </td> 
    </tr> 
    <tr> 
        <td></td> 
        <td>2</td> 
        <td class="price" data-price="200" data-price-copy="199">200</td> 
        <td>20</td> 
        <td> 
            <select class="form-control" id="selch"> 
                <option value="0" selected>Оригинал</option> 
                <option value="1">Копия</option> 
            </select> 
        </td> 
    </tr> 
    <tr> 
        <td></td> 
        <td>3</td> 
        <td class="price" data-price="300" data-price-copy="299">300</td> 
        <td>30</td> 
        <td> 
            <select class="form-control" id="selch"> 
                <option value="0" selected>Оригинал</option> 
                <option value="1">Копия</option> 
            </select> 
        </td> 
    </tr> 
    <tr> 
        <td colspan="2"></td> 
        <td colspan="3" id="current-sum"></td> 
    </tr> 
</table>