javascript - How to achieve this without refreshing the page using jQuery? -
i have web page populates table via jquery.
since want change classes of particular <td> element used replacewith. worked on first search, realized not asynchronously perform search without first refreshing page. tried html instead of replacewith. worked well, crammed new <td> 1 <td> has specified id.
how can achieve without refreshing page can <td> elements distributed?
before updating:
<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 display!</td> <td>more+</td> </tr> </table> after updating expect have table of format:
<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> my 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=''; (i=0; i<4; i++) (i === 0 || === 2) ? add_html += '<td class="new"></td>' : add_html += '<td></td>'; $('#no_rec').replacewith(add_html); }); }, 'json' ); });
what did add id=results tr find , store td tags , manipulate them accordingly.
see working jsfiddle demo
all notes left in comments of jquery, 1 should mention here added simulatedata() function allows click update button many times want see how code handle different data that's returned.
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 display!</td> <td>more+</td> </tr> </table> <button>update</button> jquery
var norecord = "<td colspan=\"4\">no record display!</td>", currenttime = 0; $( "button" ).click( function () { var $results = $( "#results" ), // tr. $tds = $( "#results" ).find( "td" ), // tds within tr. data = simulatedata(); // simulate data. // check see if data returned. if ( data === undefined ) { // data not returned. if ( $results.html().indexof( norecord ) === -1 ) { // results tr has previous values need removed. ( = 1; < 5; i++ ) $( $tds[i] ).remove(); // add [no record display!] td. $( norecord ).insertafter( $tds[0] ); } } else { // data returned. $.each( data, function ( ) { // store current data. var tm = parseint( data.time ); // check see if results tr has previous values or not. if ( $results.html().indexof( norecord ) > -1 ) { // results tr not have previous values. var html = ""; // generate new tds. ( = 1; < 5; i++ ) html += "<td class=\"new\">" + tm + "</td>"; // remove [no record display!] td , replace new tds. $( $tds[1] ).replacewith( html ); } else { // results tr has previous values need loop // through each existing td replacing class , value. ( = 1; < 5; i++ ) { if ( != tm ) { // change class "new" , add stored data value. $( $tds[i] ) .removeclass( "rr" ) .addclass( "new" ) .text( tm ); } else { // change class "rr" , add "ee" value. $( $tds[i] ) .removeclass( "new" ) .addclass( "rr" ) .text( "ee" ); } } } }); } }); // simulates async calls search.php generate // different times on each click of update button. function simulatedata() { // increment our simulated time. currenttime++; if ( currenttime > 4 ) { // start on resetting our incrementer. currenttime = 0; // simulate call doesn't return data. return undefined; } else { return { "time": currenttime } } }
Comments
Post a Comment