Добавьте строку ниже, используя jquery

Question

Добавьте строку ниже, используя jquery

Я хотел бы добавить строку точно так же, как и раньше, со всеми элементами. Здесь у меня есть два варианта выбора. Сначала я выбираю категорию, затем появляется продукт, а также выбираю продукт. После этого я выбираю количество, и затем автоматически отображаются цена за единицу, подытог и общая сумма.

Вот код, который я хочу дублировать ниже.

<tr style="text-align:center">
<td>
<select name="selectCategory" id="selectCategory" class="form-control" style="width: 140px">
<option value="">-- Category --</option>
<?php
$queryCategory = "SELECT * FROM category";
$sqlCategory = mysql_query($queryCategory);
while ($row = mysql_fetch_array($sqlCategory)) {
echo '<option value="' . $row['category_id'] . '">' . $row['category_name'] . '</option>';
}
?>
</select>
</td>
<td>
<select name="selectProduct" id="selectProduct" class="form-control" style="width: 330px">
<option value="">-- Product --</option>
<!-- Show the products list -->
</select>
</td>
<td>
<input type="number" name="txtQty" id="txtQty" class="form-control" value="1" min="1" onchange="calculate()" style="width: 80px; text-align: center"/>
</td>
<td>
<input type="text" name="txtPrice" id="txtPrice" class="form-control" style="text-align:center" readonly/>
</td>
<td>
<input type="text" name="txtTotal" id="txtTotal" class="form-control" style="text-align:center" readonly/>
</td>
</tr>

Я думал об использовании jQuery, и я нашел пример, но я еще не понял.

-1

ajax clone jquery php row

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Предполагая, что вы хотите еще одну строку ниже вашей первой с выбранной вами информацией, я бы сделал это:

<script>
$("#selectProduct").change(function() {
var currentProduct = $(this).val();
var currentCategory = $("#selectCategory").val();
var row = "<tr><td>" + currentProduct + "</td><td>" + currentCategory + "</td><td></td><td></td></tr>";
$("table").append(row);
});
</script>

Теперь, если у вас есть кнопка, и вы хотите клонировать, как вы упоминали выше, я бы сделал что-то вроде этого:

<table>
<tr class="active_row">
<td>
<select name="selectCategory" id="selectCategory" class = "form-control" style = "width: 140px">
<option value = ""> --Category --</option>
<!-- your PHP options -->
</select>
</td>
<td>
<select name="selectProduct" id="selectProduct" class="form-control" style="width: 330px">
<option value="">-- Product --</option>
<!-- your PHP options -->
</select>
</td>
<td><!-- quantity info --> </td>
<td><!-- price info --> </td>
<td><!-- subtotal info --> </td>
</tr>
</table>

<script>
$("#add_row_button").click(function(){
var $row_clone = $(".active_row").clone();
$(".active_row").addClass("row");
$(".active_row").removeClass("active_row");
$("table").append($row_clone);
});
</script>

0