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