将表td的addClass/removeClass与ajax一起使用

the use of addClass/removeClass of a table td with ajax

本文关键字：ajax 一起 removeClass td addClass 将表      更新时间：2023-09-26

下面的代码输出一个带有值的表，并根据值获得布局。我使用jQuery（Ajax）每10秒更新一次信息。

生成所需变量并将其存储（回显）到json数组（example.php）的php脚本

$variable1 = 20;
if ($variable1 > 0) {
$td_variable1class="positive";
} else {
$td_variable1class="negative";
}
$array['variable1']      = $variable1;
$array['td_variable1']   = $td_variable1;
echo json_encode($array);

html表，其中从example.php生成的json中检索变量：

<table>
    <tr>
        <td class='variable1class'>
        <div id='variable1'></div>
        </td>
    </tr>
</table>

javascript:

<script type="text/javascript">
   $(function() {
     refresh();
    });
    function refresh() {
         $.getJSON('example.php', function(data) {
            $('div#variable1').html(data.variable1);
            $('td.td_variable1').addClass(data.td_variable1);
       });
    setTimeout("refresh()",10000);
   }

问题是"addClass"将一个类添加到现有类中，导致如下输出：

刷新前：

<td class="td_variable1 positive">

之后（假设变量从正变为负）：

<td class="td_variable1 positive negative">

我试图通过使用removeclass:来避免这种情况

$('td.td_variable1').removeClass().addClass(data.td_variable1);

但是，td的实际类名被删除了，我的输出看起来像这样：

<td class="negative">

它应该是这样的：

<td class="td_variable1 negative">

提前感谢您的帮助！

假设您只有这两个选项，请同时删除这两个（并且只删除那两个），然后添加新选项：

$('td.td_variable1').removeClass("positive negative").addClass(data.td_variable1);

.removeClass()在未给定任何参数时删除所有类。请改用.removeClass("negative")。

相关文章：