如何维护 html 容器元素的计数并发送到 Servlet？

Question

我在 html 元素 test-case 和 step-container 之间存在父子关系，因此当用户单击添加 +Step 时，一个测试用例可以有多个步骤也是添加 +TestCase.

的按钮

用户首先必须创建 TestCase 并向其添加一个或多个 Steps。 test-case 和 step-container 都包含在父级 test-case-container.

中

在JSP:

<div class="buttons">
  <form action="./AddTestCases" method="post"><button id="test" name="test-btn" value="1">ADD TEST CASE</button></form>
</div>

<form class="from-class" action="./AddTestCases" method="post">

  <div id="tc-001" class="test-case-container">

    <div class="test-case">
      <div>
        <label for="tc-name-001" class="test-case-label">TC001</label>
        <button id="tc-delete-001" name="tc-delete-001" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
      </div>
      <textarea id="tc-name-001" name="tc-name-001" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
    </div>

    <div class="step-container">
      <div>
        <label for="step-name-001" class="step-num-label">Step 1</label>
        <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
      </div>
      <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
    </div>

    <input type="submit" id="step" value="ADD STEP">
    <button id="done" value="DONE">DONE</button>

  </div>

  <button id="save">SAVE</button>

</form>

我正在使用 from 收集此数据并将其发送到 Servlet 进行处理。

问题是，在我向 servlet 发送 post 请求之前，如何计算每个 TestCase 有多少 Steps。我想要这样的东西：

{
'tc-01': 2,
'tc-02': 3,
'tc-03': 5,
}

然后发送此 with/before 数据，以便我可以根据每个测试用例的步骤数进一步处理它。

Answer 1

为了在您的 TestCase 下保持 div 的计数，您可以使用 name ="test-case-container" 获得所有 class 然后我们可以循环遍历它以获得 [=14] 的计数=] 然后最后将其添加到数组 .

演示代码 :

var test = new Array(); //frov creating array of object[{},{}]
var test2 = {} //or for creating objects only { ,, }

function add() {
//getting div with class ="test-case-container"
  const tests = document.querySelectorAll('.test-case-container');
  tests.forEach(function(e) {
  //getting id of div
    var ids = e.getAttribute('id');
    //getting count of div under the main div 
    var count = e.getElementsByClassName("step-container").length;
    item = {}
    item[ids] = count;
    test.push(item); //adding item to array
    test2[ids] = count;
  });
  console.log(test) //array of objects [ {} ,{}]
  console.log(test2) //objects { ,, }

  //ajax call to send the array 
  //or submit the form adding these in hidden inputs
}

<div id="tc-001" class="test-case-container">

  <div class="test-case">
    <div>
      <label for="tc-name-001" class="test-case-label">TC001</label>
      <button id="tc-delete-001" name="tc-delete-001" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="tc-name-001" name="tc-name-001" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
  </div>

  <div class="step-container">
    <div>
      <label for="step-name-001" class="step-num-label">Step 1</label>
      <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>
  <div class="step-container">
    <div>
      <label for="step-name-001" class="step-num-label">Step 1</label>
      <button id="step-delete-001" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-001" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>

  <input type="submit" id="step" value="ADD STEP">
  <button id="done" value="DONE">DONE</button>

</div>
<div id="tc-002" class="test-case-container">

  <div class="test-case">
    <div>
      <label for="tc-name-002" class="test-case-label">TC002</label>
      <button id="tc-delete-002" name="tc-delete-002" class="test-case-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="tc-name-002" name="tc-name-002" class="test-case-name" rows="1" cols="50" placeholder="Test Case Name"></textarea>
  </div>

  <div class="step-container">
    <div>
      <label for="step-name-002" class="step-num-label">Step 1</label>
      <button id="step-delete-002" name="step-delete-001" class="step-del" style="margin-left: 16rem;">DELETE</button>
    </div>
    <textarea id="step-name-002" name="step-name-001" class="step-desc" rows="2" cols="50" placeholder="Step Description"></textarea>
  </div>


  <input type="submit" id="step" value="ADD STEP">
  <button id="done" value="DONE">DONE</button>

</div>

<button id="save" onclick="add()">SAVE</button>
                      <!--added onclick-->

然后，您可以将此数组放入某个隐藏的 inputs，然后提交您的表单，或者您可以使用 ajax 将这些数据发送到您的 servlet。

如何维护 html 容器元素的计数并发送到 Servlet？

How to maintain count of html container elements and send to Servlet?

html

javascript

jsp

servlets