how to access checked rows from a table data

Question

i have a dynamically generated table and after the table loads i need to print few selected rows in console based on checkbox.

The table is populated with data from backend.

<div class="row" style="margin-left : 8px !important;margin-right : 8px !important">
                    <table class="table table-bordered fixed_headers" id="Device_list">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>IPADDRESS</th>
                                <th>DEVICE NAME</th>
                                <th>STATUS</th>
                                <th>BACKUP</th>
                            </tr>
                        </thead>
                        <tbody id = "all_device">
                            {% for item in Device_list %}
                                    <tr>
                                        <td><input type="checkbox" name="device_check"/></td>
                                        <td>{{ item['ipaddress'] }} </td>
                                        <td>{{ item['name'] }} </td>
                                        <td>{{ item['status'] }} </td>
                                        {% if item['backup'] == 'no_backup' %}
                                            <td>{{ item['backup'] }}</td>
                                        {% else %}
                                            <td><a href="{{ url_for('backups_texts',path = item['backup']) }}">Backup</a> </td>
                                        {% endif %}
                                    </tr>
                            {% endfor %}
                        </tbody>
                        <input type="submit" id="bt" value="Show Table Data"  />
                    </table>

function myfunc() {
        console.log ("inside my function");
        var valuelist = [];
        $('#all_device tr').each(function() {
            $(this).find("input[name='device_check']:checked").each(function() {
                var values = [];
                $(this).closest("td").siblings("td").each(function() {
                    values.push($(this).text());
                });
                valuelist.push(values.join(", "));
            });
        });
        console.log("(" + valuelist.join("),(") + ")");
   }
   $(document).ready(function() {
        $("#bt").click(function() {
            myfunc();
        });
   });

Kindly help with accessing the table row content.

Doesn't your code (`myfunc`) work? – dunli Sep 16 '19 at 02:48 — dunli, Sep 16 '19 at 02:48
What error are you seeing? – Asa Stallard Sep 16 '19 at 02:56 — Asa Stallard, Sep 16 '19 at 02:56

dunli · Answer 1 · 2019-09-18T05:20:20.920

0

I don't know if your code doesn't work but it would be better to query all checked checkboxes instead of looping through all tr, like this:

function myfunc() {
    var valuelist = [];
    $('#all_device input[name=device_check]:checked').each(function(i, c){
        var cb = $(c);
        valuelist.push(cb.parent().siblings().map(function(si, s){ return $(s).text() }).get());
    });

  console.log('Selected', valuelist);
}

The console should output like so:

Note: Screenshot only shows sample data

EDIT

If you want to follow your original code (where valuelist is an array of comma-separated values, you can use this code instead:


function myfunc() {
    var valuelist = [];
    $('#all_device input[name=device_check]:checked').each(function(i, c){
        var cb = $(c);
        valuelist.push(cb.parent().siblings().map(function(si, s){ return $(s).text() }).get().join(', '));
    });

  console.log('Selected', '(' + valuelist.join('),(') + ')');
}

edited Sep 18 '19 at 05:20

answered Sep 16 '19 at 03:11

dunli

1,356
9
18

HI, @dunli thanks for the comment i got the preferred output on the console but then i am stuck with access of this list at the backend which i am sending through ajax call . request.form on the python side gives ImmutableMultiDict. any idea how to access this in python function .Thanks for the help in advanced. – shalss Sep 17 '19 at 16:48
ajax call --- $.ajax({ url: 'http://127.0.0.1:5000/backup', data: JSON.stringify(valuelist), dataType: "json", method: 'POST', success: function(data) { alert(data.value); } }); – shalss Sep 17 '19 at 16:48
@app.route('/backup', methods=['POST',"GET"]) def backup_conf(): if request.method == "POST": value = request.form() print (value) return "" – shalss Sep 17 '19 at 16:50
getting output as : ImmutableMultiDict([('[["10.11.9.3","host1","Node status is Up","no_backup"],["10.11.9.4","host2","Node status is Up","no_backup"]]', '')]) – shalss Sep 17 '19 at 16:51
Hi, I'm don't really know how to code python, but try these links: https://stackoverflow.com/questions/23205577/python-flask-immutablemultidict https://stackoverflow.com/questions/11176594/passing-list-of-values-to-django-view-via-jquery-ajax-call https://healeycodes.com/javascript/python/beginners/webdev/2019/04/11/talking-between-languages.html – dunli Sep 18 '19 at 05:13

how to access checked rows from a table data

1 Answers1