Javascript thêm dòng dữ liệu động vào form

Đôi khi bạn cần tạo form động, cho phép người dùng tùy ý thêm field dữ liệu vào form

Dưới đây là đoạn code thêm fields động vào form dùng trong dự án .net core, view razor

 <!-- html code -->

<table class="table table-responsive" id="product-table">

<tr>

<th>TÊN SẢN PHẨM</th>

<th>SỐ LƯỢNG</th>

<th>

<a href="javascript:void(0);" class="btn btn-sm btn-success">

<i class="fas fa-plus" onclick="addNewRow()"> Thêm sản phẩm</i>

</a>

</th>

</tr>

<tr>

<td id="col0">

<input class="form-control" type="text" asp-for="Products" />

</td>

<td id="col1">

<input class="form-control" type="text" asp-for="ProductCount" />

</td>

<td id="col2">

</td>

</tr>

</table>

<!-- javascript code -->

<script>

/* This method will add a new row */

function addNewRow() {

let table = document.getElementById("product-table");

let rowCount = table.rows.length;

let cellCount = table.rows[0].cells.length;

let row = table.insertRow(rowCount);

for (let i = 0; i < cellCount; i++) {

let cell = 'cell' + i;

cell = row.insertCell(i);

if (i < cellCount - 1) {

let copycel = document.getElementById('col' + i).innerHTML;

cell.innerHTML = copycel;

} else {

cell.innerHTML = '<a href="javascript:void(0);" class="btn btn-danger btn-sm"><i class="fas fa-trash" onclick="deleteRow(this)"> Xóa sản phẩm</i></a>';

}

}

}

/* This method will delete a row */

function deleteRow(ele) {

let table = document.getElementById('product-table');

let rowCount = table.rows.length;

if (rowCount < 3) {

alert("There is no row available to delete!");

return;

} else {

if (ele) {

//delete specific row

ele.parentNode.parentNode.parentNode.remove();

} else {

//delete last row

table.deleteRow(rowCount - 1);

}

}

}

</script>

[Happy coding]