Question

I have a table with a bunch of rows with one column which is QuestionText, the rows can be anything between 1-20 rows depending on how many rows the user add to the table.

Here is my table:

<table id="CustomPickedTable" class="box-style2">
        <thead><tr><th>Choosen Questions</th></tr></thead>
        <tbody>
         <tr><td data-row="2">Choosen Data</td></tr>
         <tr><td data-row="1">Choosen data</td></tr>
        </tbody>
</table>

Rows with data in the table can get added/removed by users by another Jquery code.

When a user have choosen what rows she/he wants inside the table, the user clicks on a next button and on this click event I want that all rows inside the tables gets displayed in maby <p> with a textarea under it that is readonly. It should display like a Preview for the user and it should be orderby like the table.

How Can I do this?

Answer 1

This is how I would do it

Html

<table id="CustomPickedTable" class="box-style2">
    <thead><tr><th>Choosen Questions</th></tr></thead>
    <tbody>
    <tr><td data-row="2">Choosen Data</td></tr>
    <tr><td data-row="1">Choosen data</td></tr>
    </tbody>
</table>
<input type="button" value="Preview" onclick="preview()" />
<hr />
<div id="test">
</div>​

Javascript

function preview(){
    $('#CustomPickedTable tbody tr td').each(function(){ 
        $('#test').append('<p>'+$(this).text()+'</p><textarea disabled="disabled"></textarea>');    
    });
}​

Or see my sample here