CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Joey
Joey

Reputation: 1876

Getting Values from Generated Table

I have a table that is generated with data from a JSON. The behavior I am attempting create is when they click on any cell (more specifically row) in the table it will show the values in text on the bottom of the screen. I have everything working but when it gets the values it merges them together with no spaces.

Here are parts of my code:

HTML

<div class="container" id="table-container">
    <table class="table table-bordered table-hover" id="table">
        <thead>
        <tr>
            <th data-field="make" data-sortable="true">Make</th>
            <th data-field="model" data-sortable="true">Model</th>
            <th data-field="year" data-sortable="true">Year</th>
        </tr>
        </thead>
    </table>
</div>

<hr/>
<div class="container">
    <h3>Reviews</h3>
    <br/>
    <h4 id="car-id"></h4>
</div>

JS

$('#table').on("click", "tbody tr", function () {
    $('#car-id').text(($(this).closest("tr").text()));
});

The output of this when clicking a row looks something like...

HondaCivic2012

but what I was trying to get was

Honda Civic 2012

The best case scenario is trying to figure out how to isolate the values after clicking the row so that I can perform actions on each Make, Model, Year text. For example if I can figure out how to isolate the values I will make something that outputs

Make: Honda

Model: Civic

Year: 2012

Upvotes: 0

Views: 49

Answers (1)

Tim Barnett
Tim Barnett

Reputation: 1013

Best option would be to cycle through the cells individually.

Here, this should get you started

$('#table').on("click", "tbody tr", function () {
    $('td', this).each(function () {
        $('#car-id').append($(this).text() + " ");
     })
});

Upvotes: 1

Related Questions