HTML表到JavaScript数组的特定列

Question

I need help on storing two columns of a html table to a Javascript array. I create the table dynamically using php. following is my php code;

$inc = 1;
foreach($result as $element) {
    echo "<tr><td>".$element['qs_id']."</td>";
    echo "<td>".$element['qs_desc']."</td>";
    echo "<td><input type=\"radio\" name=\"select".$inc."\" value=\"0\" ";
    if($element['qq_rate'] == '0') echo "checked=\"checked\"";
    echo "></input></td>";
    echo " <td><input type=\"radio\" name=\"select".$inc."\" value=\"1\"";
    if($element['qq_rate'] == '1') echo "checked=\"checked\"";
    echo "></input></td>";
    echo " <td><input type=\"radio\" name=\"select".$inc."\" value=\"2\"";
    if($element['qq_rate'] == '2') echo "checked=\"checked\"";
    echo "></input></td>";
    echo " <td><input type=\"radio\" name=\"select".$inc."\" value=\"3\"";
    if($element['qq_rate'] == '3') echo "checked=\"checked\"";
    echo "></input></td>";
    echo " <td><input type=\"radio\" name=\"select".$inc."\" value=\"na\"";
    if($element['qq_rate'] == '') echo "checked=\"checked\"";
    echo "></input></td>";
    echo "</tr>";
    $inc = $inc +1;
}

This populates the html table with relevant 'id','desc' etc from the database. Then it writes radio buttons with a unique tag name for each of them. The result looks like following;

I want to store the id in the first column and its relevant rating (ie. 1,2,3,na) to a Javascript array.

Please help.

Answer 1

If you have jQuery already included or free to use it you can try the following code:

var data = [];
$('table tr').each(function(){
    var row = $(this);
    var id = row.find('td:first').text();
    if ($.isNumeric(id)) {
        var selectedRadio = row.find(':radio[name=select' + id + ']:checked');
        data.push([id, selectedRadio.val()]);
    }
});
alert(data);

Demo

If not it will be little more complex to iterate over DOM-elements but still doable )

Answer 2

Place the whole table into a form so

<form id="form">
    <table>
        .. etc ..
    </table>
</form>

And then serialize the form on click using $('#form').serialize();

Fiddle (forked from pxx): http://jsfiddle.net/B5fKm/