javascript - 删除选定的行 - Struts2

Question

我正在尝试创建一个网页，其中包含我使用 Struts 2 所做的事情的历史记录。提交后，包含上一页参数的行将添加到我的历史表中。
我想要做的是允许用户通过检查一行或多行并按“删除所选”按钮来删除此表中的记录。
编辑:该表是使用列表对象动态创建的，因此我不想删除 html 行，但我需要从列表中删除记录。

表创建如下:

<table>
    <tr>
        <th></th>
        ...
    </tr>
    <s:iterator value="myList">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                <!-- other stuff -->
            </td>
        </tr>
    </s:iterator>
</table>

这样，利用我所知道的，我可以仅使用 Javascript 遍历复选框。

为了获取行号，我正在使用 Javascript

 function checkRows() {
     var rowsIndex;
     var rows = document.getElementById('historyTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
     for (i = 1; i < rows.length; i++) {
         if(rows[i].getElementsByTagName('td')[0].getElementsByTagName('input')[0].checked) {
             // here "i" is the row number if checked
         }
     }
 }

这是按钮

   <s:url id="urlRemove" action="myAction">
       <s:param name="rowsIndex">
           <!-- List of index of selected rows -->
       </s:param>
   </s:url>
   <s:a href="%{urlRemove}">
       <input type="button" value="Remove Selected" />
   </s:a>

我知道在提交后用 Javascript 修改的内容会丢失，所以我想我必须使用 Javascript 中检查的行号填充操作中的列表或分配给 <s:param name="rowsIndex">一个属性，但我仍然需要使用 javascript 迭代行。
感谢任何帮助，谢谢。

Answer 1

nmc的答案指向标准方式。依赖 Javascript 是没有必要的，而且在我看来也很丑陋。但是 nmc 的解决方案也有一个问题:通过项目在某些动态列表中占据的位置来识别要删除的项目是非常危险的。 (如果同时有人添加/删除了一些项目怎么办？如果用户重复提交，或者返回并重新提交怎么办？)

您应该通过一些唯一的稳定 key 来识别每个项目，您的操作可以解决这个问题。例如，假设您的操作提供了 map 中的项目以及安全 key :

public class CheckBoxSampleAction extends ActionSupport
  private Map<Integer, DataWrapper> mymap; // data to show, with "secure stable" keys

  public Map<Integer, DataWrapper> getDataAsMap() {
       // fill lazyly mymap and return it
  } 

  public Set<Integer> getMapKeys(){
        return getDataAsMap().keySet();
  }

  private class DataWrapper {
    private String myvalue;
    private boolean selected; // for checkbox
        ... // more properties, getters, setters...
  }
 }

在你的jsp中:

<s2:form theme="simple">
<table>
<s2:iterator value="mapKeys"><tr>
<td><s2:property value="dataAsMap[top].mivalue"/></td>
<td><s2:checkbox name="dataAsMap[%{top}].selected" theme="simple"/></td>
...
</tr></s2:iterator>
</table>
<s2:submit value="Remove selected" method="remove"/>
</s2:form>