ボタンをクリックしたときにクリックされたテーブル行のデータキー値を渡す方法

Question

私はいくつかの行を持つテーブルを持ち、各トウはデータキー値を持っています。今度は、これらの行の1つを選択し、このデータ・キー値を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"、およびaddEventという関数を呼び出すonclickEventを追加しました。

これは、関数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リクエストなど、好きなものに使用します。