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