Mark Evans Mark Evans - 7 days ago 4
jQuery Question

How to access Cell from jQuery data tables from specific table row

I have a JFiddle that is able to recognise the table row and return the table data as required but need to return the last two cells of the row, which are write-able, modify and return modified values? How can I modify the jQuery as follows?

$(document).ready(function () {
var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
});

$('#button').click(function () {
var ids = $.map(table.rows('.selected').data(), function (item) {
return item[0]
});
console.log(ids)
for(var i =0;i<table.rows('.selected').data().length;i++){
alert(table.rows('.selected').data()[i] + ' row(s) selected');
}
});
});


http://jsfiddle.net/arunpjohny/f4bppa43/

Answer

Here's the solution working. Hope it helps!

$(document).ready(function () {
    $('#example tr:eq(2)').remove();
    $( "tr:eq(2) td:eq(0)" ).hide();
    $( "tr:eq(2) td:eq(1)" ).hide();
    $( "tr:eq(2) td:eq(2)" ).hide();
    $( "tr:eq(2) td:eq(3)" ).hide();

     $( "tr:eq(0) th:eq(0)" ).hide();
     $( "tr:eq(0) th:eq(1)" ).hide();
     $( "tr:eq(0) th:eq(2)" ).hide();
     $( "tr:eq(0) th:eq(3)" ).hide();

     $( "tr:eq(1) th:eq(0)" ).hide();
     $( "tr:eq(1) th:eq(1)" ).hide();
     $( "tr:eq(1) th:eq(2)" ).hide();
     $( "tr:eq(1) th:eq(3)" ).hide();

    var table = $('#example').DataTable();
    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });

    $('#button').click(function () {
        var ids = $.map(table.rows('.selected').data(), function (item) {
            return item[0]
        });
        console.log(ids)
        alert(table.rows('.selected').data().length + ' row(s) selected');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/css/jquery.dataTables.css">
<button id="button">btn</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>

Comments