javascript - 表示タグテーブルの行に一意の行 ID を与える方法は?

Question

表示タグを使用して、JSP にユーザーリストを表示しています。リストから特定の行/ユーザーを削除するために、各行に削除ボタンがあります。このために、私は ajax を使用しています。

ユーザーはajaxを使用してデータベースから削除されています。しかし、私はajaxを使用しているので。ページを更新するまで、ユーザーは表示タグリストに残ります。

javascriptを使用して表示テーブルから行を削除する方法はありますか?

javascriptを使用してテーブルから行を削除できると思う限り、少なくとも行IDを知る必要があります。

では、表示テーブルの各行に一意の行 ID を与えるにはどうすればよいでしょうか?

助けてください。

以下は私のコードです

<display:table name="employeeUpdateList" pagesize="50" 
    class="listingTable" keepStatus="true" cellpadding="0px"
    cellspacing="0px" id="employeeUpdate" export="true" requestURI="">
    <display:setProperty name="export.decorated" value="true" />
    <display:setProperty name="export.excel.filename"
        value="Employee Update List.xls" />
    <display:column title="What is changed" property="columnName"></display:column>
    <display:column title="From" property="oldValue"></display:column>
    <display:column title="To" property="newValue"></display:column>
    <display:column title="Effective Date">
        <fmt:formatDate value="${employeeUpdate.effectiveDate}"
            pattern="dd MMMM yyyy" />
    </display:column>
    <display:column title="Changed By" property="changedBy.fullname"></display:column>
    <display:column title="Changed On">
        <fmt:formatDate value="${employeeUpdate.changedOn }"
            pattern="dd MMMM yyyy hh:mm:ss" />
    </display:column>
    <display:column media="html"
        style="text-align :center!important;padding:0px!important">
        <input class="input-button-small" type="button"
            value="<spring:message code='button.delete' />"
            onclick="deleteEmployeeUpdate('${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')" />
    </display:column>
    <display:setProperty name="paging.banner.item_name"
        value="Employee Update" />
    <display:setProperty name="paging.banner.items_name"
        value="Employee updates " />
</display:table>

score 3 · Accepted Answer

更新-コードを投稿したので、DOM0onclick="..."ハンドラーを使用しているようです。これを行うことはお勧めしません（以下を参照してください。これは、イベントの委任を行うための典型的なユースケースです。個々のボタンではなく、テーブルレベルでクリックを監視します）。

deleteEmployeeUpdateクリックされたボタンである別の引数を受け入れるように関数を変更する必要があります。それで：

onclick="deleteEmployeeUpdate(this, '${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')"

と

function deleteEmployeeUpdate(button, url, id) {
    // ...
}

次に、その関数内でボタンを含む行を削除するには、次のようにします。

var row = button.parentNode;
while (row && row.tagName.toLowerCase() !== "tr") {
    row = row.parentNode;
}
if (row) {
  row.parentNode.removeChild(row);
}

イベント委任を使用した解決策については以下を参照してください。その下には、いくつかの便利な資料があります。

行IDを指定する必要はありません。削除ボタンでイベントを処理するclick場合、通常、その削除ボタン要素への参照はとしてありますthis。それを含むノード（要素）であるparentNodeプロパティがあります。それはおそらくテーブルセル（td）です。また、プロパティもありparentNodeます。これはおそらく行（tr）であり、通常はtbody、などの親もあります。

親ノードのremoveChild関数trを呼び出して要素を渡すことにより、行を削除できます。

完全な例を次に示します。ライブコピー| ソース

HTML：

<table id="theTable">
  <tbody>
    <tr><td>First row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Second row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Third row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Fourth row</td><td><button class="delete">Delete</button></td></tr>
  </tbody>
</table>

JavaScript：

(function() {

  // Get a reference to the table
  var theTable = document.getElementById("theTable");

  // Watch for clicks
  hookEvent(theTable, "click", function(event) {
    var elm, row, tbody;
    elm = event.target
    while (elm && elm.className !== "delete") {
      elm = elm.parentNode;
    }
    if (elm) {
      // It's the delete button, remove this row
      row = elm.parentNode.parentNode; // Parent of button's parent
      tbody = row.parentNode;
      tbody.removeChild(row);
    }
  });

  // === Basic utility functions

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, function(event) {
        return handler(event || window.event);
      });
    }
    else {
      throw "Browser not supported.";
    }
  }
})();

読む：

FWIW、jQuery、Prototype、YUI、Closure、またはその他のいくつかのような優れたJavaScriptライブラリを使用することを強くお勧めします。この例は劇的に短くなり、低レベルのDOM APIの詳細をいじくり回すのではなく、構築しようとしているものに集中する方法を示しています。

たとえば、jQueryを使用した上記の例：Live copy | ソース

HTML：

（変化なし）

JavaScript：

jQuery(function($) {
  $("#theTable").on("click", "button.delete", function() {
    $(this).closest("tr").remove();
  });
});

これはjQuery1.7以降の場合です。以前に何かを使用している場合は、（引数の順序が変わることに注意してください）delegateではなく使用します。on

jQuery(function($) {
  $("#theTable").delegate("button.delete", "click", function() {
    $(this).closest("tr").remove();
  });
});

他のライブラリのほとんどでも同様に簡単です。

javascript - 表示タグテーブルの行に一意の行 ID を与える方法は?

1 に答える 1

Related

Reference