Obtain current row from button click

Question

I've been trying to read a particular value from a row of display that I have on my php webpage. The idea is I am trying to get the current value of the certain cell in the row, however, I've tried using getElementsByTagName does not work, as I can not access the value afterwards (only has HTMLCollection object). I am using closest, but this only works and gets the beginning row.

EDITED:

Does not seem to pop up anything. Well the modal does pop up, but no alerts.

Tried this demo but did not work either haha...

<td><button class='sellButton btn btn-primary' data-target='#modalsell' id='sellStock'>Sell Stock</button></td>

<div id="modalsell" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Sell Stocks</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <div class="input-group">
                            <label for="shares" class="input-group-addon glyphicon glyphicon-user">Amount of Shares:</label>
                            <input type="text" class="form-control" id="sharess" placeholder="Shares Selling...">
                            <label for="start" class="input-group-addon glyphicon glyphicon-user">Minimal Sell Price:</label>
                            <input type="text" class="form-control" id="starts" placeholder="(0 for No Limit)" value="0">

                            <label for="stop" class="input-group-addon glyphicon glyphicon-user">Max Sell Price:</label>
                            <input type="text" class="form-control" id="stops" placeholder="(0 for No Limit)" value="0">
                        </div> <!-- /.input-group -->
                    </div> <!-- /.form-group -->

                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-toggle='modal' onclick="sellStock()">Place Sell</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
      </div>

undefined elements in invoker

$(document).ready(function(){
    $(".sellButton").on('click', function (e) {
       alert('test 1');
       $('#modalsell').modal('toggle', $(this));
    });
    $('#modalsell').on('show.bs.modal', function(button){
        alert('test 2');
        var $invoker = $(button.relatedTarget);
        alert($($invoker).id);
    });
});

Answer 1

Issue : the main issue with your code is you are using same id in loop (id='sellStock'). This is the reason you are getting same tr on clicking any button.

Note : id attribute should be unique inside page.

Solution : Try this code for getting parent tr of clicked button.

<th><button onclick="myFunction(this)">Sell Stock</button></th>

your handler function :

function myFunction(elem) {
    var x = elem.parentElement.parentElement; // x is the parent row 
    //rest of your code goes here
}

Alternative :

You can also use class selector instead of id which is a better option.

update as per comment request :

you can use get the invoker element of modal by doing this. #your-modal is your modal selector, you can use class or id as per your requirement.

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
  //rest of code
});

instead of :

 alert($($invoker).id);

use this :

 alert($($invoker).attr('id'));

Happy Coding!

Answer 2

Jquery solution

First Case:

If you want whole row of table then you have to identify your table using some unique class or Id.

Lets say if your table unique class name is "table-responsive" then you can get all row of table using

$(".table-responsive").find('tbody tr');

It will give you rows of tbody.

Second case:

If you want to get row of current click button(in this case sellStock) button then you can use parents in context of this on button click.

Example:

From @Touheed Khan answer: Don't use id if you are generating multiple element in loop dynamically. you can use class, otherwise it will get only first element.

Let's say if your button class name is rowButton then you can use it as like below.

  $(".rowButton").click(function() {
         var currrentRow =$(this).parents('tr');
    });

thanks @Touheed Khan.

Answer 3

1. use class and TD

   "<tr> <td>". $arrayval"</td> <td class='need'>"."(Need)"."</td> <td>".$arrayval."</td> <td>".$arrayval."</td> <td>".$arrayval."</td> <td><button class='sellStock btn btn-primary' data-toggle='modal' data-target='#modal1'>Sell Stock</button></td> </tr>";

2. use jQuery consistently

   $(".table").on("click",".sellStock",function() { var cellContent = $(this).closest("tr").find(".need").text(); });
   or
   $(".table").on("click",".sellStock",function() { var row = $(this).closest("tr"); // handle row here });