使用jQuery / JS获取表行值

Question

我正在尝试使用以下代码获取表值名称：

我的桌子：

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

我的按钮：

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

点击功能：

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

在这里，我想将我的环境和应用程序发送到服务器端，并获取表中的行的值，但是代码不起作用并且不接收任何内容：

       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代码：

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

我在哪里错在这里我听不懂？

Answer 1

您尝试在sendUnblockDeploySubmitHandler()方法中访问jQuery(this) ，但是this句柄未引用button元素。 我建议您在绑定click事件时直接传递回调函数。

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

这样，您可以在sendUnblockDeploySubmitHandler()使用jQuery(this)访问相应的button元素。

Answer 2

您可以将click事件传递给sendUnblockDeploySubmitHandler函数：

$('.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);
}

我整理了一个jsbin来显示此工作： https ://jsbin.com/sosimudubi/1/edit?html,js,console,output