添加具有self值的数据属性

Add data attribute with value from self

本文关键字：数据属性 self 添加      更新时间：2023-09-26

我有一个表，我想为每行的最后一个子项添加一个属性"data order"。见下表。

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

我的代码出了什么问题？谢谢

此时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());
});

你可以这样做

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

请看下面的代码片段：

$(document).ready(function() {
    $( '#table_id tbody tr').each(function(){
       $(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
         <tbody>
           <tr>
            <td>Test</td>
            <td>255 500</td>
          </tr>
           <tr>
            <td>Test1</td>
            <td>2551 5001</td>
          </tr>
           <tr>
            <td>Test2</td>
            <td>2552 5002</td>
          </tr>
        </tbody>
    </table>

用于.每个的功能与类似

$(document).ready(function(){
  
  $('#table_id tr td:last-child').each(function(){
      var thisText = $(this).text();
    
      $(this).attr('data-order',thisText);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
         <tbody>
           <tr>
            <td>Test</td>
            <td>255 500</td>
          </tr>
<tr>
            <td>Test</td>
            <td>255 500</td>
          </tr>
        </tbody>
    </table>

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

您可以简单地使用data()

    $('#table_id tr td:last-child').each(function(){
         var text= $(this).text();    
         $(this).data('order',text);
    });
相关文章：