What I am trying to do in my code is to return a row of my table when it is clicked. I am doing this in the jquery function $("tr.table").click(function)..... After that I am trying to store the data of this table row in a variable named tableData. This all works fine but when i try to use the variable tabledata in an if statement. I get an tabledata is undefined error. My question is how can I use the variable tabledata in my if statement without getting an error.
my javascript code
function onUpdate() {
var tableData
var auth2 = gapi.auth2.getAuthInstance();
var profile = auth2.currentUser.get().getBasicProfile();
$("tr.table").click(function () {
tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
});
if( tableData[7] === 2) {
console.log("if statement");
...
}
else {
console.log("else statement");
$.confirm({
title: '',
content: '',
buttons: {
confirm: function () {
}
}
});
}
}
my html table code
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table command">
<a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>
</td>
</tr>
</tbody>
</table>
You don't need to assign click event within onUpdate function. If I understood right, you want to click on update button and execute if..else block. You can pass a reference of a element like onclick="onUpdate(this)" in HTML. Then use .closest() to find the tr and get entire row as an array. One thing to keep in mide here is in if using === for comparison may not work as array will contain string value even for numbers. So either do type conversion or just use == to compare only values as done here.
function onUpdate($this) {
var tableData;
tableData = $($this).closest('tr').children("td").map(function() {
return $(this).text();
}).get();
//console.log(tableData);
if (tableData[7] == 2) {
console.log("if statement 2");
} else if (tableData[7] == 22) {
console.log("if statement 22");
} else {
console.log("else statement");
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 2</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">2</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 22</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">22</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 33</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">33</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
</tbody>
</table>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments