Question

＆＃13;

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="odd" class="data_row">
    <td class="first data" style="min-width: 29px;">1</td>
  </tr>
</table>

＆＃13;

任何人都可以告诉我它为什么不起作用。我怎样才能使它可行？还请解释为什么它不起作用。所以下次我会照顾它。

Answer 1

截至目前，您正在使用多个类属性，请参阅HTML5 PR，第8.1.2.3节Attributes

同一个开始标记上绝不能有两个或多个属性，这些属性的名称是彼此不区分大小写的ASCII匹配。

忽略第二个class属性，因此您需要使用带有<TR>元素的单个类属性。

<tr class="odd data_row">       
</tr>

而不是

<tr class="odd" class="data_row">
</tr>

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="odd data_row">
    <td class="first data" style="min-width: 29px;">1</td>
  </tr>
</table>

Answer 2

$('.data_row').last().css('background', 'red');

.data_row {
height:50px;
width:60px;
margin-bottom:10px;
border:1px solid blue;
display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data_row"></div>
<div class="data_row"></div>
<div class="data_row"></div>

尝试使用$('.data_row').last()代替$('.data_row:last')和jQuery。

Answer 3

我觉得使用以下方法会更好。

$('table').append('<tr class="odd"> <td class="first data" style="min-width: 29px;"></td><td class="first data" style="min-width: 258px;" colspan="2"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 59px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 79px;"></td></tr>');

为什么呢？因为你让Jquery搜索最后一个TD然后在那之后附加它，但是我的上面的代码。我觉得只有表被查询，插入总是在最后完成。

Answer 4

 <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title> </title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {  
 $('.data').append('<tr class="odd"> <td class="first data" style="min-width: 29px;"></td><td class="first data" style="min-width: 258px;" colspan="2"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 59px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 39px;"></td><td class="first data" style="min-width: 79px;"></td><td class="first data" style="min-width: 79px;"></td></tr>');
$('.first').last().css( "background-color", "red" );

}); 
</script>
</head>
<body>  
<table class="data">


</table> 

</body>

jQuery：最后一个选择器不起作用

4 个答案: