如何在点击按钮时传递单击表格行的数据键值

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，“submitButton”和一个onclickEvent，它将调用函数addEvent。

这是函数的addEvent：

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

这link变量可以很容易地使用或AJAX调用与jQuery只是简单的JavaScript来实现。

旁注

的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请求。