在 JavaScript 中循环遍历 Struts 迭代器

Question

我有一个项目列表（来自后端数据库），它是使用 .jsp 文件中的 Struts 迭代器动态填充的。该文件还有一个 JavaScript 函数，用于将新项目插入数据库。但在执行插入之前，我需要检查项目 ID（这是一个唯一键）是否不存在。我试过这样的事情：

item.jsp

<s:form name="ItemForm" id="ItemForm" action="Item.action">
    <table>
      <tbody>
        <s:iterator value="itemForm.allItems">
          <tr class="pointer" align="left">
            <td align="left"><s:property value="itemID" /></td>
            <td align="left"><s:property value="itemName" /></td>
          </tr>
        </s:iterator>
      </tbody>
    </table>

    <label>Item ID</label>
    <s:textfield name="itemForm.itemID" id="itemID"/>

    <label>Item Name</label>
    <s:textfield name="itemForm.itemName" id="itemName"/>

    <button type="button" id="insertBtn" onclick="insertItem()">Add New Item</button>
</s:form>

<script>
function insertItem() {
    // check if item already exist
    var inputID = document.getElementById("itemID").value;
    var allItems = $("#itemForm.allItems"); // doesn't work - allItems remain undefined
    for (var item in allItems) {
        if (item["itemID"] == inputID) {
            alert("Item ID already exist");
            return; // exit if already exist
        }
    }


// code to insert item

}
</script>

如何使用 struts 迭代器遍历 JavaScript 中的项目列表？如果那不可能，在 JS 级别推荐的方法是什么？

编辑：

我也按照建议尝试了以下方法。

        var inputID = document.getElementById("itemID").value;

        // Get all itemIDs and look for a match
        var matchingElement = $("#itemForm\.allItems tr td:first-child").filter(function() {
            return this.textContent.trim.value() = inputID; // returns an array of matching values
        });

        console.log("matchingElement length: " + matchingElement.length);

        if (matchingElement.length > 0) {
            alert("Item ID already exist");
            return; // exit if already exist
        }

无论我输入什么 itemID，这总是 returns 一个空数组（长度=0）。我在没有 .filter() 的情况下尝试了它，但仍然得到了相同的结果，这让我相信问题出在获取实际列表（即我最初遇到的相同问题），而不是过滤器。

var matchingElement = $("#itemForm\.allItems tr td:first-child");

这是生成的示例 html。抱歉，如果它不是很有帮助。我不得不省略和掩盖很多与我的工作有关的东西。

            <table class="table table-striped jambo_table bulk_action" id="searchResults">
            <caption>Search Results</caption>
            <thead>
              <tr class="headings">
                <th align="left" class="column-title"><a class="sort" href="javascript:sortItem('itemID')">Item ID</th>
                <th align="left" class="column-title"><a class="sort" href="javascript:sortItem('itemName')">Item Name</th>
              </tr>
            </thead>
            <tbody>
                <tr class="pointer" align="left">
                  <td align="left">BT </td>
                  <td align="left">Item BT</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">CLM</td>
                  <td align="left">Item CLM</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">CR </td>
                  <td align="left">Item CR</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">FA </td>
                  <td align="left">Item FA</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">HN </td>
                  <td align="left">Item HN</td>
                </tr>   
                <tr class="pointer" align="left">
                  <td align="left">LA  </td>
                  <td align="left">Item LA</td>
                </tr>   
            </tbody>
            </table>

Answer 1

您可能想试试这个：

function insertItem() {
    // check if item already exist
    var inputID = document.getElementById("itemID").value;
    $("#searchResults tbody tr td:first-child").each( function( index){
    alert( $(this).text().trim() );
    if ( $(this).text().trim() == inputID) {
        alert("Item ID already exist");
        return; // exit if already exist
    }
    });
// code to insert item
}

或者您可以使用以下方式访问您的 allItems：

var allItems = "<s:property value='itemForm.allItems'/>"

在 JavaScript 中循环遍历 Struts 迭代器

Loop through Struts iterator in JavaScript

javascript

jquery

jsp

struts2