Question

我有一张表，我想在每行的最后一个孩子中添加一个属性'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>

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

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

Answer 2

你可以这样做

var lastTd = $( '#table_id tbody tr td:last-child');

lastTd.attr( 'data-order', lastTd.html());

Answer 3

请查看以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

用于 .each 功能，就像这样

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

$(document).ready(function () {

        $('#table_id tr td:last-child').each(function () {

            $(this).attr('data-order', $(this).text());
        });

    });

Answer 6

您只需使用data()

即可

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

使用self中的值添加数据属性

6 个答案: