jeudi 4 mai 2017

retrieving selected (using checkbox )row data of a dynamic table created using json objects

I have a table which is created dynamically using the JSON data from backend.There is a checkbox column used to retrieve the data from a particular row. Once the checkbox is checked, I need to get the row data in an array using Javascript.I have the below code, when I check a checkbox I am not able to fetch the row data or not able to get the alert as in the code. Can anyone help me to correct this ?

HTML Code:

<table id="playerList"class="table table-bordered"style="background-color:#black;" >
            <thead style="background-color:#22b14c;">
              <tr >
                <th style="width:20px;"><input id='checkbox1' class='case' name='case[]' type='checkbox' ></input></th>
                <th style="width:200px">Player</th>
                <th style="width:200px;">Score</th>
              </tr>
            </thead>
            <tbody style="background-color:#black;" >


            </tbody>
        </table>

Javascript Code:

<script type="text/javascript">
$(document).ready(function() {

show_PlayerLimits();
$('.case').click(function(){
    var row = jQuery(this).closest('tr');
    $(row).each(function(){

        alert("in a row");
    });
});
function show_PlayerLimits(){
                    $.ajax({   
                        url: "http://localhost:8080/API/admin/getAllPlayers",
                        method: "POST",
                        dataType: "json",
                        crossDomain: true,
                        contentType: "application/json; charset=utf-8",

                        cache: false,
                        beforeSend: function (xhr) {
                            /* Authorization header */
                            xhr.setRequestHeader("Authorization", localStorage.accessToken );

                        },
                        success: function (response, textStatus, jqXHR) {
                            console.log(response);
                            //alert("success position");
                            if(response.success==true){
                                data=response.users;
                                console.log(data);
                                 len=response.users.length;
                                 user=response.users;
                                 console.log(len);
                                  $.each(data,function(i,user){
                                    $('tr:odd').addClass('odd');
                                        var tblRow =
                                            "<tr>"
                                            +"<td><input name='chk[]' type='checkbox' class='chk' value='"+user.id+"'/></td>"
                                            +"<td>"+user.player+"</td>"
                                            +"<td>"+user.score+"</td>"

                                            +"</tr>";

                                            $(tblRow).appendTo("#playerList");

                                            });

                                    $('#playerList').DataTable();

                                console.log(data);
                                console.log(response.users[1].player);
                                console.log(response.users[0].score);
                                console.log(response.users.length);

                            }   
                            else
                            {
                                alert(response.message);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(textStatus,errorThrown);
                        }
            })




            return false;
            }

});




Aucun commentaire:

Enregistrer un commentaire