javascript - 添加具有来自 self 的值的数据属性

Question

我有一个表，我想向其中每行的最后一个子元素添加属性“数据顺序”。见下表。

     <table id="table_id" class="display">
         <tbody>
           <tr>
            <td>Test</td>
            <td>255 500</td>
          </tr>
        </tbody>
    </table>

我想将最后一个 td 的值添加到属性中。

Before : <td>255 500</td>
After  : <td data-order"255 500">255 500</td>

我使用 $(this).text() 从 td 获取值，但它似乎没有按照我想象的方式工作。我得到了包含多个表行的奇怪数据。我使用这段 Javascript 代码来添加属性。

    $(document).ready(function() {
        $( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
    });
    </script>

我的代码有什么问题吗？谢谢。

Answer 1

此时 this 并不引用您的 $( '#table_id tbody tr td:last-child')

我认为你必须声明一个 var，这样的东西可以帮助你

var $MyObject = $( '#table_id tbody tr td:last-child'); 
$MyObject.attr( 'data-order', $MyObject.text());

如果表中有多行，您可以在每个循环中使用this。

示例案例

<table id="table_id" class="display">
   <tbody>
       <tr>
         <td>Test</td>
         <td>255 500</td>
       </tr>
       <tr>
          <td>Test1</td>
          <td>255 5001</td>
       </tr>
       <tr>
         <td>Test2</td>
         <td>255 500</td>
       </tr>
    </tbody>
</table> 

$( '#table_id tbody tr td:last-child').each(function(){
  var $MyObject = $(this); // this here referer to the current object of the loop
  $MyObject.attr( 'data-order', $MyObject.text());
});