我有税务组模型，然后有产品类别。然后我有一个主要形式，就是对其中有一个表的产品加税。在这里我想要动态表，其中可以动态添加和删除行。为此，我编写了JavaScript。
我创建了对象列表，并将其用作对象以将所有行数据添加为列表。
但是当我执行i时，即使添加行后，表的字段也不会显示。
请为我提供使用spring boot jpa和行数据操作创建动态表的解决方案。
我尝试在带有内置tomcat服务器的eclipse中使用spring boot eclipse jpa和mySQL。
税收模式：
package com.example.demo.model;
@Entity
public class Tax {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private int taxId;
private String taxHead;
private int taxGroupId;
private String addless;
// private String purchaseSalesType;
private String description;
private int purchaseSalesTypeId;
private Date createdOn;
private int createdBy;
private Date updatedOn;
private int udpatedBy;
private int Status;
//getter setters
}
TaxService :
@Service
public class TaxService {
@Autowired
TaxRepository taxRepository;
public void addTax(Tax tax) {
taxRepository.save(tax);
}
public Tax getTaxById(int taxId) {
return taxRepository.findById(taxId).orElse(null);
}
public void deleteTax(Integer taxId) {
taxRepository.deleteById(taxId);
}
public Tax updateTax(Tax tax) {
Tax updateProd = taxRepository.save(tax);
return updateProd;
}
public Iterable<Tax> getAllTaxes() {
return taxRepository.findAll();
}
}
TaxRepository：
package com.example.demo.repository;
import org.springframework.data.repository.CrudRepository;
import com.example.demo.model.Tax;
public interface TaxRepository extends CrudRepository<Tax, Integer> {
}
TaxController :
@Controller
@RequestMapping(value = "/admin/tax/")
public class TaxController {
@Autowired
TaxService taxService;
@Autowired
TaxGroupService taxGroupService;
@Autowired
private ApplicableProductTaxService applicableProductTaxService;
@Autowired
private PurchaseSalesTypeService purchaseSalesTypeService;
@Autowired
private ProductCategoryService productCategoryService;
List<ApplicableProductTax> taxes = new ArrayList<ApplicableProductTax>();
@GetMapping("/showAddTax")
public String showAddTaxForm(Tax tax, ApplicableProductTax
applicableProductTax,
ArrayList<ApplicableProductTax> applicableProductTaxes, Model
model) {
taxes.add(new ApplicableProductTax());
model.addAttribute("purchaseSalesTypes",
purchaseSalesTypeService.getAllPurchaseSalesTypes());
model.addAttribute("productCategories",
productCategoryService.getAllProductCategories());
model.addAttribute("taxGroups", taxGroupService.getAllTaxGroups());
model.addAttribute("applicableProductTax", new
ApplicableProductTax());
model.addAttribute("applicableProductTaxes", taxes);
return "addTax";
}
@GetMapping("/addRow")
public String allRow(Tax tax, ApplicableProductTax
applicableProductTax,
List<ApplicableProductTax> applicableProductTaxes, Model model) {
taxes.add(new ApplicableProductTax());
model.addAttribute("purchaseSalesTypes",
purchaseSalesTypeService.getAllPurchaseSalesTypes());
model.addAttribute("productCategories",
productCategoryService.getAllProductCategories());
model.addAttribute("taxGroups", taxGroupService.getAllTaxGroups());
model.addAttribute("applicableProductTax", new
ApplicableProductTax());
model.addAttribute("applicableProductTaxes", taxes);
return "addTax";
}
@GetMapping("/allTaxes")
public String allTaxes() {
return "allTaxes";
}
@ModelAttribute("taxes")
public Iterable<Tax> taxes() {
return taxService.getAllTaxes();
}
@GetMapping("/view/{taxId}")
public String viewSingleTaxForm(@PathVariable int taxId, Model model) {
Tax tax = taxService.getTaxById(taxId);
model.addAttribute("tax", tax);
return "viewTax";
}
@PostMapping("/addTax")
public String addTax(@Valid Tax tax, @Valid ApplicableProductTax
applicableProductTax, BindingResult result,
@Valid List<ApplicableProductTax> applicableProductTaxes, Model
model) {
if (result.hasErrors()) {
return "addTax";
}
tax.setCreatedBy(12);
tax.setCreatedOn(new java.util.Date());
tax.setUdpatedBy(12);
tax.setUpdatedOn(new java.util.Date());
tax.setStatus(1);
taxService.addTax(tax);
applicableProductTaxService.saveAll(applicableProductTaxes);
applicableProductTax.setTaxHeadId(tax.getTaxId());
applicableProductTaxService.addApplicableProductTax(applicableProductTax);
model.addAttribute("taxes", taxService.getAllTaxes());
return "allTaxes";
}
@ModelAttribute("purchaseSalesTypes")
public Iterable<PurchaseSalesType> purchaseSalesTypes() {
return purchaseSalesTypeService.getAllPurchaseSalesTypes();
}
@ModelAttribute("taxGroups")
public Iterable<TaxGroup> taxGroups() {
return taxGroupService.getAllTaxGroups();
}
@GetMapping("/edit/{taxId}")
public String showUpdateTaxForm(@PathVariable("taxId") int taxId, Model
model) {
Tax tax = taxService.getTaxById(taxId);
model.addAttribute("tax", tax);
return "updateTax";
}
@GetMapping(value = "/delete/{taxId}")
public String deleteTax(@PathVariable("taxId") Integer taxId, Model
model) {
taxService.deleteTax(taxId);
model.addAttribute("taxes", taxService.getAllTaxes());
return "allTaxes";
}
@GetMapping(value = "/getAlltaxes")
public Iterable<Tax> getAllTaxes() {
return taxService.getAllTaxes();
}
@PostMapping(value = "/update/{taxId}")
public String UpdateTax(@PathVariable("taxId") Integer taxId, @Valid Tax
tax, BindingResult result, Model model) {
if (result.hasErrors()) {
tax.setTaxId(taxId);
return "updateTax";
}
Tax b = taxService.getTaxById(taxId);
tax.setCreatedBy(b.getCreatedBy());
tax.setCreatedOn(b.getCreatedOn());
tax.setUdpatedBy(14);
tax.setUpdatedOn(new java.util.Date());
tax.setStatus(1);
taxService.updateTax(taxService.updateTax(tax));
model.addAttribute("taxes", taxService.getAllTaxes());
return "allTaxes";
}
}
Add Tax : Here is the issue :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Add Tax</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/JavaScript">
var no = 1;
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 10) { // limit the user from creating fields more than
your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
}
no++;
} else {
alert("Maximum no of products are 10");
}
}
function delete_Row(r) {
if (no > 1) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("dataTable").deleteRow(i);
no--;
document.getElementById("no_of_products").value = no;
} else {
alert("Minimum 1 product required");
}
}
</script>
</head>
<body>
<div class="container my-5">
<h2 class="mb-5">Add New Tax</h2>
<div class="row">
<div class="col-md-6" id="yourPanel" th:fragment="yourFragment">
<form id="form1" name="form1" action="#"
th:action="@{/admin/tax/addTax}" method="post">
<div th:object="${tax}" class="row">
<div class="form-group col-md-6">
<label for="taxHead" class="col-form-label">Tax
Head</label> <input
type="text" th:field="*{taxHead}"
class="form-control"
id="taxHead" placeholder="taxHead"> <span
th:if="${#fields.hasErrors('taxHead')}"
th:errors="*{taxHead}"
class="text-danger"></span>
</div>
<div class="form-group col-md-6">
<select class="form-control" th:field=*
{taxGroupId}
id="soflow-color">
<option th:value=0>---Select Tax Group---
</option>
<option th:each="taxGroup : ${taxGroups}"
th:value="${taxGroup.taxGroupId}"
th:utext="${taxGroup.taxGroupName}" />
</select>
</div>
<div class="form-group col-md-6">
<select class="form-control" th:field=*{addless}
id="soflow-color">
<option th:value=0>---Select To add/Less---
</option>
<option th:value="add" th:utext="ADD" />
<option th:value="Less" th:utext="Less" />
</select>
</div>
<div class="form-group col-md-6">
<select class="form-control" th:field=*
{purchaseSalesTypeId}
id="soflow-color">
<option th:value=0>---Select Purchase Sales
Type---</option>
<option th:each="purchaseSalesType :
${purchaseSalesTypes}"
th:value="${purchaseSalesType.purchaseSalesTypeId}"
th:utext="${purchaseSalesType.salesType}"
/>
</select>
</div>
<div class="form-group col-md-6">
<label for="description" class="col-form-label">
Description </label> <input type="text"
th:field="*{description}"
class="form-control" id="description"
placeholder="description">
<span th:if="${#fields.hasErrors('description')}"
th:errors="*{description}" class="text-
danger"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<div class="row">
<div class="col-25">
<input class="button" type="button"
value="Add"
onClick="addRow('dataTable')">
</div>
<div class="col-15"></div>
</div>
<br> <br> <br>
<div id="temp_div"
th:object=${applicableProductTaxes}>
<table id="dataTable" class="form" border=1>
<tbody>
<tr>
<th><label>Product Category
</label></th>
<th><label>Effective from</label>
</th>
<th><label>Rate (%)</label></th>
<th><label>Manage</label></th>
</tr>
<tr th:each="applicableProductTax,
rowStat : *{applicableTaxes}" th:class="${rowStat.even ? 'even' :
'odd'}">
<td>
<div class="col-25">
<select class="form-
control"
th:field="*
{applicableTaxes[__${rowStat.index}__].categoryId}">
<option th:value=-1>-
--Select Type---</option>
<option
th:each="category : ${productCategories}"
th:value="${category.product_category_Id}"
th:utext="${category.name}" />
</select>
</div>
</td>
<td>
<div class="col-25">
<input type="date"
th:field="*
{applicableTaxes[__${rowStat.index}__].effectivefrom}"
class="form-control"
id="effectivefrom"
placeholder="effectivefrom">
<!-- <span
th:if="${#fields.hasErrors('effectivefrom')}"
th:errors="*
{effectivefrom}" class="text-danger"> </span> -->
</div>
</td>
<td>
<div class="col-25">
<input type="text"
th:field="*
{applicableTaxes[__${rowStat.index}__].rate}"
class="form-control"
id="rate" placeholder="rate">
<!-- <span
th:if="${#fields.hasErrors('rate')}" th:errors="*{rate}"
class="text-danger">
</span> -->
</div>
</td>
<td></td>
<td><input class="button"
type="button" value="Delete"
onclick="delete_Row(this)">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mt-5">
<input type="submit" class="btn btn-primary"
value="Add Tax">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
我想保存表中的记录，并且表应该是动态的。