javascript - 在 JavaScript 中循环遍历 Struts 迭代器

Question

我有一个项目列表(来自后端数据库)，它是使用 Struts 迭代器在 .jsp 文件中动态填充的。该文件还具有一个 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，它总是返回一个空数组(长度 = 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'/>"