Si agrega filas de tabla como se muestra en el código a continuación, se almacenan en una fila cuando se guardan en la base de datos.
function addRow() { var table = document.getElementById("table"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); cell1.innerHTML = "<h4></h4>"; cell2.innerHTML = "<input type='text' name='testCaseName' id='testCaseName'>"; cell3.innerHTML = "<textarea name='testProcedure' id='testProcedure' onkeydown='resize(this)' onkeyup='resize(this)'></textarea>"; cell4.innerHTML = "<input type='text' name='expect' id='expect'>"; }
<table id="table"> <tr> <td>num</td> <td>name</td> <td>procedure</td> <td>expect</td> </tr> <tr> <td><h4></h4></td> <td><input type="text" name="testCaseName" id="testCaseName"></td> <td><textarea name="testProcedure" id="testProcedure" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td> <td><input type="text" name="expect" id="expect"></td> </tr> <tr> <td> <input type="button" value="addRow" onclick="addRow()"></input> <input type="submit" value="submit"> </td> </tr> </table>
Servicio, ServiceImpl (Utilice el método de guardado en el repositorio JPA)
void register(TestCase testCase);
@Override @Transactional public void register(TestCase testCase) { testCaseRepository.save(testCase); }
Controlador
@RequestMapping("/testCase/register") public String register(TestCase testCase) { testCaseService.register(testCase); return "redirect:/testCase/projectList"; }
Me gustaría agregar una fila a la base de datos para cada fila que agregué como se muestra a continuación, así que avíseme qué hacer.
INSERT INTO test_case VALUES(NULL, 'name', 'procedure', 'expect', '1'), (NULL, 'name', 'procedure', 'expect', '1'), (NULL, 'name', 'procedure', 'expect', '1');
puedes usar hoja de tomillo
ver https://www.thymeleaf.org/
Ayudarle a controlar los datos de los elementos de la página web con facilidad
Agregue un formulario a la página html de la siguiente manera:
<form th:action="@{'/testCase/register'}" method="post" th:object="${testcase}> <table id="table"> <tr> <td>num</td> <td>name</td> <td>procedure</td> <td>expect</td> </tr> <tr> <td><h4></h4></td> <td><input type="text" name="testCaseName" th:field="*{testCaseName}" id="testCaseName"></td> <td><textarea name="testProcedure" th:field="*{testProcedure}" id="testProcedure" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td> <td><input type="text" name="expect" th:field="*{expect}" id="expect"></td> </tr> <tr> <td> <input type="button" value="addRow" onclick="addRow()"></input> <input type="submit" value="submit"> </td> </tr> </table> </form>
Asegúrese de que los nombres de campo sean los mismos que los nombres de campo en la entidad TestCase
Modifique la clase de controlador de la siguiente manera:
@ModelAttribute(value = "testcase") public TestCase testcase() { return new TestCase(); } @RequestMapping(value = "/testCase/register" , method = RequestMethod.POST) public String register(@ModelAttribute("testcase") TestCase testCase) { testCaseService.register(testCase); return "redirect:/testCase/projectList"; }
Estás publicando una entidad singular por lo que puedo ver. Para publicar una lista para comenzar, debe modificar el controlador para aceptar dicha lista
@RequestMapping("/testCase/register") public String register(List<TestCase> testCases) { testCaseService.register(testCases); return "redirect:/testCase/projectList"; }
Y luego modifique el html para que se asigne correctamente a la lista dada
<form th:action="@{'/testCase/register'}" method="post"> <table id="table"> <tr> <td>num</td> <td>name</td> <td>procedure</td> <td>expect</td> </tr> <tr> <td><h4></h4></td> <td><input type="text" name="testCases[0].testCaseName"></td> <td><textarea name="testCases[0].testProcedure" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td> <td><input type="text" name="testCases[0].expect"></td> </tr> <tr> <td> <input type="button" value="addRow" onclick="addRow()"></input> <input type="submit" value="submit"> </td> </tr> </table> </form>
También tendría que modificar el html para que la función addRow() agregue correctamente la siguiente [x]
para los nombres de entrada.
Si desea completar datos preexistentes, debe agregar filas en cada ciclo como
<tr th:each="testCase, iter : ${testCases}"> <td><h4></h4></td> <td><input type="text" th:name="${testCases[__${personStat.index}__].testCaseName}" th:value="${testCase.testCaseName}"></td> <td><textarea th:name="${testCases[__${personStat.index}__].testCaseName}" th:value="${testCase.testCaseName}" onkeydown="resize(this)" onkeyup="resize(this)"></textarea></td> <td><input type="text" th:name="${testCases[__${personStat.index}__].expect}" th:value="${testCase.expect}"></td> </tr>