选择单选按钮时如何获取表格行元素的值 [英] how to get a value of elements of a row of table when radio button is selected

问题描述

我有一个JSP页面，我在其中基于数据库查询动态创建表.我有一个单选按钮作为每一行的第一列.我希望在单击特定的单选按钮时，将该行中的所有元素值都传递给按钮.

I have a JSP page in which i am dynamically creating a table based on the query from database.I have a radio button as my first column for each row. I want that on click of particular radio button, all the elements value in that row is passed to a button.

推荐答案

可能会使用植根于表的委托处理程序，将click处理程序添加到单选按钮.在处理程序中，this将引用该按钮，因此您可以访问其父(或祖先)行.例如:

Add a click handler to the radio button, probably using a delegated handler rooted on the table. In the handler, this will refer to the button, and so you can access its parent (or ancestor) row. E.g.:

$("selector-for-the-table").on("click", "input[type=radio]", function() {
    var row = $(this).closest("tr");
    // ...
});

如果要从同一行中的其他元素获取信息，则可以使用 row.find 在行中找到它们.

If you want to get information from the other elements in that same row, you can use row.find to find them within the row.

请参见 on文档中的直接和委派事件.有关委派处理程序的更多信息，以及on文档的其他各个部分，这些内容如何确定this等.

See Direct and Delegated Events in the on documentation for more about delegated handlers, and various other parts of the on documentation for how this is determined, etc.

示例:

$("#the-table").on("click", "input[type=radio]", function() {
  var row = $(this).closest("tr");
  alert(row.find("input").not(this).map(function() {
    return this.value;
  }).get().join(", "));
});
var counter = 0;
addRow();
function addRow() {
  $("#the-table tbody").append(
    "<tr>" +
      "<td><input type=radio></td>" +
      "<td><input type=text value=" + counter + "></td>" +
      "<td><input type=text value=" + (counter * 10) + "></td>" +
    "</tr>"
  );
  if (++counter < 10) {
    setTimeout(addRow, 500);
  }
}

<table id="the-table">
  <tbody>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这篇关于选择单选按钮时如何获取表格行元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！