How do I make a table row an array?-CodePudding

If you add table rows as shown in the code below, they are stored in one row when they are saved in the database.

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>

Service, ServiceImpl (Use the save method in the JPA Repository)

void register(TestCase testCase);

@Override
    @Transactional
    public void register(TestCase testCase)
    {
        testCaseRepository.save(testCase);
    }

Controller

    @RequestMapping("/testCase/register")
    public String register(TestCase testCase)
    {
        testCaseService.register(testCase);
        
        return "redirect:/testCase/projectList";
    }

I would like to add a row to the database for each row I added as below query statement, so please advise me what to do.

INSERT INTO test_case VALUES(NULL, 'name', 'procedure', 'expect', '1'), (NULL, 'name', 'procedure', 'expect', '1'), (NULL, 'name', 'procedure', 'expect', '1');

CodePudding user response：

you can use Thymeleaf

see https://www.thymeleaf.org/

Help you control the data on the elements in the web page with ease

Add a form to the html page as follows:

<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>

Make sure that the field names are the same as the field names in entity TestCase

Modify the controller class as follows:

@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";
 }

CodePudding user response：

You are posting a singular entity asfar as i can see. To post a list for a start you have to modify controller to accept said list

@RequestMapping("/testCase/register")
public String register(List<TestCase> testCases)
{
    testCaseService.register(testCases);
        
    return "redirect:/testCase/projectList";
}

And than modify the html so that it maps correctly to the given list

<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>

You'd also have to modify the html so that the addRow() function correctly adds the next[x] for the input names.

If you wanted to fill pre-existing data you have to add rows in a each loop like

<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>