如何在不使用jQuery刷新页面的情况下实现此目的？

Question

我有一个通过jQuery填充表格的网页。

因为我只想更改我使用<td>的特定replaceWith元素的类。这在第一次搜索时运行良好，但我意识到，如果没有先刷新页面，我就无法异步执行其他搜索。然后我尝试html而不是replaceWith。这很有效，但将所有新的<td>塞进一个具有指定ID的<td>。

如何在不刷新页面的情况下实现此目的，以便我可以很好地分发<td>元素？

更新前：

<table>
<tr>
<td>first row</td>
<td>measure1</td>
<td>measure2</td>
<td>measure3</td>
<td>measure4</td>
<td> </td>
</tr>
<tr>
<td>First row</td>
<td id="no_rec" colspan="4"> No record to display!</td>
<td>More+</td>
</tr>
</table>

更新后我希望有一个格式表：

<table>
    <tr>
    <td>first row</td>
    <td>measure1</td>
    <td>measure2</td>
    <td>measure3</td>
    <td>measure4</td>
    <td> </td>
    </tr>
    <tr>
    <td>First row</td>
    <td class="new"></td>
    <td class="new"></td>
    <td class="new"></td>
    <td class="new"></td>
    <td>More+</td>
    </tr>
</table>

我的JavaScript：

$('#mybutton').click(function() 
{
    $.post
    (
        'search.php', 
        {
            regNo: $("#regNo").val(),
            datepicker: $(".datepicker").text()
        },
        function(data) 
        {
            $.each(data, function(i) 
            {
                var tm = data.time;

                add_html='';

                for (i=0; i<4; i++)
                    (i === 0 || i === 2) 
                        ? add_html += '<td class="new"></td>' 
                        : add_html += '<td></td>';

                $('#no_rec').replaceWith(add_html);
            });
        },
        'json'
    );
});

My JsFiddle Attempts

Answer 1

  

因为我只想改变特定元素的类，所以我使用了replaceWith

replaceWith()方法完全用新内容替换所有匹配元素。

只需更改css类即可使用

  

.addClass()   将指定的类添加到匹配的元素

     

.removeClass()

     

从匹配的元素中删除指定的类

     

.toggleClass()

     

如果未应用该类，则添加该类;如果已应用该类，则将其删除

Answer 2

我所做的是将id=results添加到tr，以便找到并存储所有td代码，然后相应地对其进行操作。

的 See working jsFiddle demo 的

所有注释都保留在jQuery的注释中，但我在这里要提到的是我添加了一个simulateData()函数，它基本上允许您单击Update按钮多次想看看代码将如何处理返回的不同数据。

的 HTML 的

---

<table border="1">
    <tr>
        <td>first row/measures</td>
        <td>measure1</td>
        <td>measure2</td>
        <td>measure3</td>
        <td>measure4</td>
        <td>measure5</td>
    </tr>
    <tr id="results">
        <td>First row</td>
        <td colspan="4">No record to display!</td>
        <td>More+</td>
    </tr>
</table>
<button>Update</button>

的的jQuery 的

---

var noRecord = "<td colspan=\"4\">No record to display!</td>",
    currentTime = 0;

$( "button" ).click( function ()
{    
    var $results = $( "#results" ),              // Get the TR.
        $tds = $( "#results" ).find( "td" ),     // Get the TDs within the TR.
        data = simulateData();                   // Simulate data.

    // Check to see if data was returned.

    if ( data === undefined )
    {
        // Data was not returned.

        if ( $results.html().indexOf( noRecord ) === -1 )
        {
            // Results TR has previous values that need to be removed.

            for ( i = 1; i < 5; i++ )
                $( $tds[i] ).remove();

            // Add back the [No record to display!] TD.

            $( noRecord ).insertAfter( $tds[0] );
        }
    }
    else
    {
        // Data was returned.

        $.each( data, function ( i ) 
        {
            // Store the current data.

            var tm = parseInt( data.time );

            // Check to see if the Results TR has previous values or not.

            if ( $results.html().indexOf( noRecord ) > -1 )
            {
                // Results TR does not have previous values.

                var html = "";

                // Generate new TDs.

                for ( i = 1; i < 5; i++ )
                    html += "<td class=\"new\">" + tm + "</td>";

                // Remove [No record to display!] TD and replace with new TDs.

                $( $tds[1] ).replaceWith( html );
            }
            else
            {
                // Results TR has previous values so we need to loop 
                // through each existing TD replacing its class and value.

                for ( i = 1; i < 5; i++ )
                {
                    if ( i != tm )
                    {
                        // Change class to "new" and add stored data value.

                        $( $tds[i] )
                            .removeClass( "rr" )
                            .addClass( "new" )
                            .text( tm );
                    }
                    else
                    {
                        // Change class to "rr" and add "ee" value.

                        $( $tds[i] )
                            .removeClass( "new" )
                            .addClass( "rr" )
                            .text( "ee" );
                    }
                }
            }
        });
    }
});


// This simulates the async calls to search.php to generate 
// different times on each click of the Update button.

function simulateData()
{
    // Increment our simulated time.

    currentTime++;

    if ( currentTime > 4 ) 
    { 
        // Start over by resetting our incrementer.

        currentTime = 0; 

        // Simulate a call that doesn't return data.

        return undefined;
    }
    else 
    {
        return { "time": currentTime }
    }
}