CODEWITHSUNDEEP
javascriptjqueryhtml
Cyber
Cyber

Reputation: 2704

How to pass data-key value of clicked Table row when click on Button

I have a table with some rows and each tow has an data-key value. Now I select one of those rows and want to click on a button in order to forward this data-key value as an GET value. I don't really know how to capture this selected data-key. Kindly asking for help.

Here is a fiddle: fiddle

Below is my snippet so far.

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

Upvotes: 2

Views: 11414

Answers (1)

Per Henrik Jakobsson
Per Henrik Jakobsson

Reputation: 163

You could try to implement this code.

I will add modified version of your code, but I will mark out where I modified it.

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

Now I will show you the implementation of the function test.

function test(element){

      console.log(element.innerHTML);

}

Now, you could do anything with this element callback. For example, you could store it in a variable and send that to a PHP page using AJAX, when you press a button.

Edit 1

First, I want to point out that you cannot use <button> as a link.

First, there are a few modifications to the HTML.

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

Here we added an id, "submitButton" and an onclickEvent which will call the function addEvent.

This is the function addEvent:

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

This link variable can easily be implemented using an AJAX call with jQuery or just plain javascript.

Sidenote

The function test has also been edited.

function test(element){

      currentRow = element;

}

I recommend editing the name on the function test so that the code will look more organised.

Edit 2

If I have understood what you want out of this, this will be the new fix.

So you will have to edit the HTML again.

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

You will need to make a slight change to the javascript as well.

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

You still use this address for anything you like, for example an AJAX request.

Upvotes: 3

Related Questions