Question

I am a jQuery newbie. I have the following table –

<table summary="This table lists all values in storage."> 
         <caption>Values in storage</caption>
         <tbody> 
         <tr> 
           <th scope="row">JetBlue 983</th> 
           <td>Boston (BOS)</td> 
           <td>New York (JFK)</td> 
         </tr> 
         <tr> 
           <th scope="row">JetBlue 354</th> 
           <td>San Francisco (SFO)</td> 
           <td>Los Angeles (LAX)</td> 
         </tr> 
       <tr> 
           <th scope="row">JetBlue 465</th> 
           <td>New York (JFK)</td> 
           <td>Portland (PDX)</td> 
         </tr> 
         </tbody> 
       </table> 

Now, I want to read local storage and populate values in say the second column using jquery every time that section of the page is loaded. What is the easiest way of going about it?

Answer 1

You can do this using the following way

I am assuming you are saving json encoded data into LocalStorage

$(function{
  var data  = JSON.parse(localStorage.getItem('ITEM_KEY'));
  // data is an object now
  // find 2nd columns and populate
  $('tr td:nth-child(2)').each(function(i){

    $(this).text(data[i]);
   });
})

Assuming you want to insert the same data found from localStorage. And number of element in the data array is same as number of columns.

Reference: $.each and :nth-child selector