Здравствуйте, мне нужна помощь, чтобы сделать следующее: мне нужно, чтобы из модального окна с таблицей данных (извлеченной из моей базы данных) они динамически добавлялись в другую таблицу. Это макет моего модального окна, отображающего информацию из моей базы данных:
А это код, с помощью которого я показываю данные: venta_venta.php
<?php
require_once('php/conexion.php');
# code...
// PARA OBTENER LOS DATAS DE LA TABLA CLIENTE ====================
$sql = "SELECT * FROM cliente";
$result = $conn->query($sql);
// PARA OBTENER LOS DATAS DE LA TABLA PRODUCTO====================
$sql2="SELECT * FROM producto";
$result2=$conn->query($sql2);
?>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Articulo</th>
<th>Unidad M.</th>
<th>Valor</th>
<th>Categoria</th>
<th>P.Unitario</th>
<th>Imagen</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<?php
if ($result2->num_rows > 0) {
// output data of each row
while($row = $result2->fetch_assoc()) {
echo '<tr><td>'.$row["nombre"].'</td><td>'.$row["unidad_medida"].'</td><td>'.$row["peso"].'</td><td>'.$row["categoria"].'</td><td>'.$row["precio"].'</td><td><img height="100" width="100" src="php/'.$row["imagen"].'" alt="img01" /></td><td><button type="button" class="btn btn-primary" id="idagregar" data-dismiss="modal"><i class="fa fa-plus" ></i> Agregar</button></td></tr>';
}
} else {
echo "0 results";
}
$conn->close();
?>
</tbody>
</table>
Я хочу, чтобы с помощью кнопки добавления, которая создается для каждой строки, я мог добавить данные этой строки в эту другую таблицу:
Но это можно добавить только один раз в строку. В дополнение к этому в то же время я хотел бы, чтобы в этой таблице был сгенерирован входной текст, чтобы указать количество указанного продукта и кнопку удаления, чтобы избавиться от этой строки. Что-то такое:
Я искал везде, но я не могу найти ничего, связанного с тем, что мне нужно. Я хочу максимально избегать использования библиотек, потому что я только начинаю заниматься веб-программированием, и я думаю, что использование библиотек на том уровне, на котором я нахожусь, может повредить моему обучению. Заранее спасибо.
Шаги следующие:
parentNode
или черезparent()
, если вы используете jQuery.<input type="number" ... />
для суммы. Вы добавляете ввод в ячейку.<button ...>Descartar</button>
чтобы отказаться от этого продукта. Вы добавляете кнопку в ячейку.<tbody>
в целевую таблицу.С jQuery это еще проще:
Вместо использования
document.createElement
вы просто используете методappend
и передаете элемент для добавления в виде строки . Например:И отказаться от продукта:
Обновлять цену по мере изменения количества
Чтобы обновлять цену по мере увеличения/уменьшения количества, необходимо разместить прослушиватель событий на
change
входе количества. Кроме того, для удобства мы сохраняем цену продукта в атрибутеdata-price
каждый раз, когда добавляем строку в целевую таблицу.В новую строку добавляем:
К
<input />
количеству добавляем слушателя:И прослушиватель события изменения:
Результат