Adding rows to an html table using JS

Question

I'm trying to take some data from my javascript file and put it into new rows and columns in my html file. I think the problem might have to do with my script closing before the table in my html file. I currently have a table in my html file that looks like this:

<div id="map" style="width: 700px; height: 700px"></div>
            <script src="js/mapping.js"></script>


            <div id="tablebody">
            <p>
                <b>List of Nearby Locations</b>
            </p>
                <table class="table table-stripped">
                    <tbody>
                        <tr>
                            <th>Name</th>
                            <th>Address</th>
                        </tr>
                        <tr>
                            <td>John Smith</td>
                            <td>1500 Pennsylvania Ave</td>
                        </tr>
                    </tbody>
                </table>
            </div>

and JS code that looks like this:

service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);


    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {

            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
                alert("name: " + results[i].name + ", Address:" + results[i].vicinity);
                $('#tablebody tr:last').after('<tr>"Name: " + results[i].name + ", Address: " + results[i].vicinity</tr>');
            }
        }
    }

Guffa · Accepted Answer · 2013-12-07 21:29:08Z

1

You are missing table cells in the table row, and I assume that you want to concatenate the name and vicinity into the code, not just showing Javascript code in the table:

$('#tablebody tr:last').after('<tr><td>Name: ' + results[i].name + ', Address: ' + results[i].vicinity + '</td></tr>');

Or perhaps with two cells in the row:

$('#tablebody tr:last').after('<tr><td>' + results[i].name + '</td><td>' + results[i].vicinity + '</td></tr>');

answered Dec 7, 2013 at 21:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Casey ScriptFu Pharr · Accepted Answer · 2013-12-07 21:26:37Z

1

Try this for javascript based :

  tableObject.insertRow(index)

Or jQuery

 $('#tablebody').append('<tr>"Name: " + results[i].name + ", Address: " + results[i].vicinity</tr>');

answered Dec 7, 2013 at 21:26

Casey ScriptFu Pharr

1,6801 gold badge17 silver badges40 bronze badges

1 Comment

Casey ScriptFu Pharr Over a year ago

make a fiddle real quick, and will get it working for you. Not with the API stuff, just the table code, and drop the google info. It is a jquery selector/tag issue.

Collectives™ on Stack Overflow

Adding rows to an html table using JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related