Question

我的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" />

Answer 1

因为您可能需要所有<td>一行，除了当前的一行，我建议您使用siblings()最接近<td>的方法：

＆＃13;

$('.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);
});

＆＃13;

<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>

＆＃13;

单击按钮将值传递给jquery函数

1 个答案: