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'     ); }); 

my jsfiddle attempts

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

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -