使用jQuery / JS获取表行值

Question

I am trying to get table value names with the following code:

my table :

        function CreateBlockDeployTableRow(data) {
         return "<tr>" +
        "<td>" + data.EnvTypeName + "</td>" +
        "<td>" + data.AppTypeName + "</td>" +
        "<td>" + deleteBtn + "</td>" +
        "</tr>";
        }

my button:

        var deleteBtn = '<button class="btn btn-danger unblock-button btn-sm 
        glyphicon glyphicon-minus" type=button > </button> '

on click function:

      function UnblockRequestHandler()
        {
        $('.unblock-button').click(function () {
        sendUnblockDeploySubmitHandler();
        });
       }

and here I want to send my Environment and Application to server side and take the value of the rows in the table , but the code is not working and not taking anything:

       function sendUnblockDeploySubmitHandler() {
       var $row = jQuery(this).closest('tr');
       var $columns = $row.find('td');

        $columns.addClass('row-highlight');
        var values = "";

          jQuery.each($columns, function (i, item) {
           values = values + 'td' + (i + 1) + ':' + item.innerHTML + 
          '<br/>';
        alert(values);
         });
           console.log(values);
          }

html code :

       <div class="tbl-responsive">
      <table id="blockDeployTable" class="table table-hover 
       requestsblockDeployTable" style="font-size: 0.8em; margin-top: 120px; 
        text-align:center">
        <thead>
          <tr>
            <th>Environment</th>
            <th>Repo</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

Where am I wrong here I cannot understand?

Answer 1

You are trying to access jQuery(this) in the sendUnblockDeploySubmitHandler() method but the this handle does not refer to the button element. I would suggest you to directly pass the callback function when you bind the click event.

function UnblockRequestHandler() {
    $('.unblock-button').click(sendUnblockDeploySubmitHandler);
}

This way, you can access the corresponding button element using jQuery(this) in the sendUnblockDeploySubmitHandler()

Answer 2

You could just pass the click event through to the sendUnblockDeploySubmitHandler function:

$('.unblock-button').click(function () {
  sendUnblockDeploySubmitHandler(event); // pass event to function
});

function sendUnblockDeploySubmitHandler(event) {
  var $row = $(event.target).closest('tr'); // event.target is the button
  var $columns = $row.find('td');

  $columns.addClass('row-highlight');
  var values = "";

  jQuery.each($columns, function (i, item) {
   values = values + 'td' + (i + 1) + ':' + item.innerHTML + '<br/>';
   alert(values);
  });

  console.log(values);
}

I've put together a jsbin to show this working: https://jsbin.com/sosimudubi/1/edit?html,js,console,output