Question

我有一个包含一些行的表，每个两行都有一个数据键值。现在我选择其中一行并想要单击一个按钮，以便将此数据键值转发为GET值。我真的不知道如何捕获这个选定的数据密钥。请求帮助。

这是一个小提琴：fiddle

到目前为止，下面是我的代码。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="form-horizontal" style="margin-top:5em;">
    <div class="input-group">
      <input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
      <button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
    </div>

    <div id="Table">
      <table class="table table-sm table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Event Name</th>
          </tr>
        </thead>
        <tbody>
          <tr class="clickable-row" data-key="12">
            <td>12</td>
            <td>Test Event 12</td>
          </tr>
          <tr class="clickable-row" data-key="13">
            <td>13</td>
            <td>Test Event 13</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Answer 1

您可以尝试实现此代码。

我将添加您的代码的修改版本，但我会标记我修改它的位置。

<div class="container-fluid">
  <div class="form-horizontal" style="margin-top:5em;">
    <div class="input-group">
      <input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
      <button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
    </div>

    <div id="Table">
      <table class="table table-sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>Event Name</th>
          </tr>
        </thead>
        <tbody>
          <tr onclick="test(this);"> // MODIFIED, This line would be added onto all your rows that you want clickable.
            <td>12</td>
            <td>Test Event 12</td>
          </tr>
          <tr onclick="test(this);">
            <td>13</td>
            <td>Test Event 13</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

现在我将向您展示功能测试的实现。

function test(element){

      console.log(element.innerHTML);

}

现在，您可以对此元素回调执行任何操作。例如，您可以将其存储在变量中，并在按下按钮时使用AJAX将其发送到PHP页面。

修改1

首先，我想指出您不能将<button>用作链接。

首先，对HTML进行一些修改。

<button id="submitButton" class="btn btn-sm btn-secondary" onclick="addEvent();" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>

这里我们添加了一个id，＆＃34; submitButton＆＃34;以及一个将调用addEvent函数的onclickEvent。

这是函数addEvent：

function addEvent(){
      if(currentRow == undefined){
        alert("Select a row");
        return;
      }
      var link = "events.phtml?TableID="+currentRow.cells[0].innerHTML;
}

这个link变量可以使用jQuery或简单的javascript使用AJAX调用轻松实现。

<强>旁注

function test也已被修改。

function test(element){

      currentRow = element;

}

我建议在功能测试中编辑名称，以便代码看起来更有条理。

修改2

如果我已经理解了你想要的东西，这将是新的修复。

所以你必须再次编辑HTML。

<div class="container-fluid">
  <div class="form-horizontal" style="margin-top:5em;">
    <div class="input-group">
      <input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
      <button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
    </div>

    <div id="Table">
      <table class="table table-sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>Event Name</th>
          </tr>
        </thead>
        <tbody>
          <tr onclick="test(this);" data-key="12"> // MODIFIED, This line would be added onto all your rows that you want clickable.
            <td>12</td>
            <td>Test Event 12</td>
          </tr>
          <tr onclick="test(this);" data-key="13">
            <td>13</td>
            <td>Test Event 13</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

您还需要对javascript稍作修改。

function addEvent(){
      if(currentRow == undefined){
        alert("Select a row");
        return;
      }
      var link = "events.phtml?TableID="+currentRow.getAttribute("data-key");
}

您仍然可以将此地址用于任何您喜欢的地址，例如AJAX请求。

单击Button时如何传递单击表行的数据键值

1 个答案: