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

您尝试访问font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.25em;方法中的jQuery(this)，但sendUnblockDeploySubmitHandler()句柄未引用this元素。我建议你在绑定click事件时直接传递回调函数。

button

这样，您就可以使用function UnblockRequestHandler() { $('.unblock-button').click(sendUnblockDeploySubmitHandler); }

中的button访问相应的jQuery(this)元素

Answer 2

您可以将点击事件传递到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

使用jQuery / JS获取表行值

2 个答案: