【问题标题】:Passing values to jquery function on click of button单击按钮将值传递给jquery函数
【发布时间】:2017-04-05 13:25:20
【问题描述】:

我的 HTML 页面中有下表,我是 Jquery 的新手

<table class="table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Start Date</th>
                        <th>Severity</th>
                        <th>Edit Data</th>
                    </tr>
                </thead>
                <tbody id="myTable">

                        <tr style="display: table-row;">
                            <td>New Rule</td>
                            <td>New Rule</td>
                            <td>2017-04-04</td>
                            <td>High</td>
                            <td>
                                <button class="btn btn-primary btn-sm editBtn">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    Edit
                                </button>
                                <button onclick="window.location =&quot;/EmployeeSpringMVC/delRule/5&quot;" data-method="delete" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                    Delete
                                </button>
                            </td>
                        </tr>

                </tbody>
            </table>

如您所见,有一个编辑按钮,我可以编写一个函数来识别对该按钮的点击,如下所示

$('.editBtn').click(function(){
        alert("test");
    });

我还需要特定行中的数据在函数中进行一些处理。如何从表格行中获取这些数据。如果有更好的方法,请随时提出建议。

我看到了here的问题,但我不明白这个答案的陈述。

var id = $(this).attr('id');

id 是如何传递给函数的。什么指定了这个中的id。

<input id="btn" type="button" value="click" />

【问题讨论】:

  • 你指的是哪些数据?
  • $(this).closest("tr") 在 jQuery 或 this.closest("tr") 在实现本机 .closest() 方法的现代浏览器中,如果需要可以填充。在两者中,this 是处理程序绑定到的元素,.closest() 从该点向上遍历祖先,直到找到与 "tr" 选择器匹配的元素。
  • 该按钮所在的 中的数据
  • ...从那里,您可以获得td 元素,在jQuery 中它将是.children("td") 或原生.cells

标签: javascript jquery


【解决方案1】:

因为您可能需要所有&lt;td&gt; 行,除了当前的我建议使用最接近&lt;td&gt;siblings() 方法:

$('.editBtn').click(e => {
  e.preventDefault();
  const $td = $(e.target).closest('td');
  const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
  console.log(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Start Date</th>
      <th>Severity</th>
      <th>Edit Data</th>
    </tr>
  </thead>
  <tbody id="myTable">

    <tr style="display: table-row;">
      <td>New Rule</td>
      <td>New Rule</td>
      <td>2017-04-04</td>
      <td>High</td>
      <td>
        <button class="btn btn-primary btn-sm editBtn">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    Edit
                                </button>
        <button onclick="window.location =&quot;/EmployeeSpringMVC/delRule/5&quot;" data-method="delete" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                    Delete
                                </button>
      </td>
    </tr>

  </tbody>
</table>

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签