Question

我需要获取按钮内的先前数据值的值。例如，当我单击第2行时，我需要获取第1行的数据值。我该怎么做？

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>act</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td><button data-rowid="value">button</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>tdornton</td>
      <td><button data-rowid="value">button</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td><button data-rowid="value">button</button></td>
    </tr>
  </tbody>
</table>

// THIS IS HOW I GET THE CLICKED ROW DATA
var rowid = $(this).data("rowid");

注意使用用户Rory的代码。当用户单击第一行时，它将获得“未定义”。我用这个条件更新了代码，但我没有解决问题。正如你所看到的，当我点击第2行时，即时获取行ID 2而不是1，我需要两者。我认为我在这种情况下遇到了问题。

    if ($prevButton === undefined)
    {
        var rowid = $(this).data("rowid"); 
        console.log(rowid);
    }
    else
    {
    var $button = $(this);
    var $prevButton = $button.closest('tr').prev().find('button');
    console.log('Prev button: ' + $prevButton.data('rowid'));               
    }

Answer 1

要实现此目的，您可以使用DOM遍历来查找上一行中的按钮，使用closest()，prev()和find()的组合，如下所示：

$('.table button').click(function() {
  var $button = $(this);
  var $prevButton = $button.closest('tr').prev().find('button');
  
  if ($prevButton.length)
    console.log('Prev button: ' + $prevButton.data('rowid'));

  console.log('This button: ' + $button.data('rowid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>act</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td><button data-rowid="value-01">button</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>tdornton</td>
      <td><button data-rowid="value-02">button</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td><button data-rowid="value-03">button</button></td>
    </tr>
  </tbody>
</table>

Answer 2

通过jQuery

$('tr').click(function(){
   console.log($(this).prev('tr').find('button').data('rowid'));
});

Answer 3

您可以使用此代码块：

＆＃13;

$('button[data-rowid="value"]').click(function(){
  var previousTr = $(this).closest('tr').prev();
  if(previousTr.length !== 0){
     var dataValue = $(previousTr).find('td button').data('rowid');
     console.log(dataValue);
  }
 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>act</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td><button data-rowid="value">button</button></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>tdornton</td>
          <td><button data-rowid="value">button</button></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td><button data-rowid="value">button</button></td>
        </tr>
      </tbody>
    </table>

＆＃13;

获取上一个数据属性

3 个答案: