Populating table with jQuery

Question

I have this table

<table class="table table-hover">
              <thead>
                  <tr>
                    <th>Person</th>
                    <th>Ethereum Address</th>
                    <th>Transaction count</th>
                    <th>Balance (in Wei)</th>
                    <th>Transaction</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Person 1</td>
                    <td class="address" id=""></td>
                    <td class="transaction"></td>
                    <td class="balance"></td>
                    <td class="ether"></td>
                    <td class="time" id=""></td>
                  </tr>
                  <tr>
                    <td>Person 2</td>
                    <td class="address" id=""></td>
                    <td class="transaction"></td>
                    <td class="balance"></td>
                    <td class="ether"></td>
                    <td class="time" id=""></td>
                  </tr>
                  <tr>
                    <td>Person 3</td>
                    <td class="address" id=""></td>
                    <td class="transaction"></td>
                    <td class="balance"></td>
                    <td class="ether"></td>
                    <td class="time" id=""></td>
                  </tr>
                </tbody>
              </table>

I would like to iterate over the table with jQuery and populate the address fields (for example) with the corresponding Ethereum addresses using web3.eth.accounts[i] (using my own addresses from a testchain).

I've tried different ways, none of which work. Currently, I'm trying

$("tbody").find("tr").each(function() { //get all rows in table   
    $(this).find('td.address').innerText = web3.eth.accounts[0] // just trying to place account 0 to test the loop
});

based on a stackoverflow answer to a similar issue.

What is wrong with the jQuery code?

Answer 1

you don't use innerText with jQuery - just .text() - and you can se the address class in the selector to target the required td without using find(). The following will iterate through all .addresses in the tbody and add the required text to the td (assuming that "i" is the index of the web3.eth.accounts you wish to insert)

var i=0;
$("tbody .address").each(function() {   
    $(this).text(web3.eth.accounts[i]);
    i++
   });