Question

我尝试将类添加到行$('tr:first-child').next().addClass("current");

整个HTML

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>All Rows</title>

  <script type="text/javascript" src="jquery.js"></script>

  <style type="text/css">
    .container {padding-left: 20px; padding-right: 20px;}
.forms{
display:inline-block;
margin-top:2%;
}

.buttons{border:1px solid #708090;}
input {margin-bottom:2%;margin-right:5%;}

button{margin-right:3%;}

.forms{border-top:3px solid #708090;}
.tableholder{height:300px; overflow-y:auto;}
.current{background-color:pink;}
  </style>
<script type="text/javascript">
$(document).ready(function(){

   $.get("getall.php", function(data){       
    {
     $('.tableholder').append(data);
    } 
    });

$('tr:first-child').next().addClass("current");

$("#next").click(function(){
$("table").find('.current').removeClass("current");
});
});

</script>
</head>
<body>
<div id="sc" class="container">
<div class="tableholder">
</div>
</div>
</body></html>

和我的php脚本。不要担心已弃用的mysql函数。我们使用旧的php安装

<?php
  $host = "localhost";
  $user = "root";
  $pass = "";
  $databaseName = "caliban";
  $tableName = "caliban";
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);
  $result = mysql_query("SELECT * FROM $tableName");            
  $array = mysql_fetch_assoc($result);                           

$result = mysql_query("SELECT * FROM $tableName");           

$rows = Array();
$i=0;
while($row = mysql_fetch_assoc($result)){
        //array_push($rows, $row);
      $rows[$i++] = $row;
}

echo "<table id='tab' border='1'>
<thead>
<tr>
<th><form><input type='checkbox' /></form></th>
<th>firstname</th>
<th>lastname</th>
<th>city</th>
<th>continent</th>
</tr>
</thead>
<tbody>";

for($j=0;$j<count($rows); $j++){
$id = $rows[$j]['id'];
$firstname = $rows[$j]['firstname'];
$lastname = $rows[$j]['lastname'];
$city = $rows[$j]['city'];
$continent = $rows[$j]['continent'];

      echo 
      "<tr id='$id' class=''>
<td><input type='checkbox' /></td>
<td>$firstname</td>
<td>$lastname</td>
<td>$city</td>
<td>$continent</td>
</tr>";
}

echo "</tbody>
</table>";
?>

get是成功的，表格应该显示，但是该类无法应用。我哪里出错了？。

Answer 1

这是您的代码块。

$(document).ready(function(){

    $.get("getall.php", function(data){       
        {
            $('.tableholder').append(data);
        } 
    });

    $('tr:first-child').next().addClass("current");

$.get调用是异步的，这意味着脚本将在返回结果之前继续。因此，

$('tr:first-child').next().addClass("current");

之前被召唤，

$('.tableholder').append(data);

请改为尝试：

$(document).ready(function(){

    $.get("getall.php", function(data){       
        {
            $('.tableholder').append(data);
            $('tr:first-child').next().addClass("current");
        } 
    });

Answer 2

您的.get()请求是异步的，因此当您尝试应用该样式时，还没有表格。在追加数据后应用样式。

$.get("getall.php", function(data) {
    $('.tableholder').append(data);
    $('tr:first-child').next().addClass("current"); 
});

Answer 3

试试这个：

$(document).ready(function () {

    $.get("getall.php", function (data) {

            $('.tableholder').append(data);
            $('tr:first-child').next().addClass("current");

    });



    $("#tab").on('click','#next',function () {
        $("table").find('.current').removeClass("current");
    });
});

BTW，ID在上下文页面上必须是唯一的，这意味着只有一个元素可以具有ID“next”

无法将addClass添加到ajax get的表行中

3 个答案: