We Keep Coding

Why is my variable tabledata returning undefined?

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>

Pass the this reference to the in-line function:
<a onclick="onUpdate(this)" />
Then use the anchor reference i.e. ref in the handler to get the row:
function onUpdate(ref) {
const $row = $(ref).closest('tr');
}
Full example
function onUpdate(ref) {
const $row = $(ref).closest('tr'),
rowData = $row.find('td:not(.actions)').map(function(td) {
return $(this).text();
}).get();
console.log(`Row data: ${JSON.stringify(rowData)}`);
if (rowData[0] === '2020-12-23') {
console.log('Hello World!');
}
}
function onDelete(ref) {
$(ref).closest('tr').remove();
}
thead tr th {
text-align: center;
}
.actions {
display: grid;
grid-auto-flow: column;
column-gap: 1em;
justify-content: center;
align-content: space-evenly;
}
.hidden {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time Slot</th>
<th>Room</th>
<th>Attendees</th>
<th class="hidden">Hidden #1</th>
<th class="hidden">Hidden #2</th>
<th class="hidden">Hidden #3</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-12-23</td>
<td>12:00</td>
<td>42</td>
<td>8</td>
<td class="hidden">...</td>
<td class="hidden">...</td>
<td class="hidden">...</td>
<td class="actions">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
</a>
<a onclick="onDelete(this)" style="color: #007bff; cursor: pointer">
<i class="fas fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>

this referes to the object the onclick method belongs to. I changed your HTML code with onclick="onUpdate(this)", now you can fecth the texts of the row with map() function.
Also you need to change your selector to select <td> of the clicked <tr> so I used [parent().parent()][1] method to reach that. You can use alternative selectors like [closest()][1]
var tableData;
function onUpdate(e) {
tableData = $(e).parent().parent().children("td").map(function () {
return $(this).text();
}).get();
console.log("Table data has created as; "+tableData);
if( tableData[7] === 2) {
console.log("if statement");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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">...</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(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete(this)" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
</tbody>
</table>

You do not need that click function so you can modify your code in this way.
<script>
function onUpdate() {
var tableData = $("tr.table")
.children("td")
.map(function () {
return $(this).text();
})
.get();
if( tableData[7] === 2) {
console.log("if statement");
}
}
</script>

how do i find all the links of videos and add option of "Play Video" or "Download Video"

I'm using php in order to crawl and generate video links from the internet and now i want to add option of "Play Video" or "Download Video" when a video link is found also add a video player when play video option is selected.
for example visit this site
http://filemile.ga/new.php?search=arrow&view=linkfile
<table>
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
<th>Play/Download???</th>
</tr>
</thead>
<tbody>
<tr>
<td class="n">
Parent Directory
</td>
<td class="m"> </td><td class="s">- </td>
<td class="t">Directory</td>
</tr>
<tr>
<td class="n">
Big_Buck_Bunny_small.ogv
</td>
<td class="m"> </td><td class="s">4.5MB</td>
<td class="t">video</td>
</tr>
<tr>
<td class="n">
bunny.mp4
</td>
<td class="m"> </td><td class="s">1.8MB</td>
<td class="t">video</td>
<td class="d"></td>
</tr>
<tr>
<td class="n">
bunny.webm
</td>
<td class="m"> </td><td class="s">2.8MB</td>
<td class="t">video</td>
</tr>
</tbody>
</table>
How do i do this?

Read the TD's .n Anchor. Extract the href and get the text.
prepare an empty TD for every TR and do like (Example using jquery):
function isVideo(uri) {
return /\.(webm|mkv|avi|mp4|mpeg|mpg|ogv)/.test(uri);
}
$("tbody tr").each(function(){
var $tdDownload = $(this).find(".d"),
$tdName = $(this).find(".n"),
$tdNameA = $tdName.find("a"),
uri = $tdNameA.prop("href"),
ext = uri.split(".").pop(),
name = $tdNameA.text(),
name2 = name.replace(/[\w\s]/ig,"");
if(!isVideo(uri)) return; // Do nothing. Else...
var pl = "<a class='play' href='"+ uri +"'>Play</a>",
dl = "<a class='download' href='"+ uri +"' download='"+ name2 +"'>Download</a>";
$tdDownload.append(pl, dl);
});
var videoPopup = document.getElementById("videoPopup");
function playVideo(event) {
event.preventDefault();
videoPopup.innerHTML = "";
var src = this.getAttribute("href");
var ext = src.split(".").pop();
var type = "video/"+ ext.replace("ogv","ogg").replace("mkv","x-matroska");
var video = document.createElement('video');
var source = document.createElement('source');
source.setAttribute("type", type);
source.setAttribute("src", src);
video.controls = true;
video.appendChild(source);
videoPopup.appendChild(video);
video.play();
}
$("table").on("click", ".play", playVideo);
table{
border-collapse: collapse;
}
th{
text-align: left;
}
th, td{
padding: 4px 16px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
td.d a{
line-height:16px;
display: block;
font-size: 11px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="n">
Parent Directory
</td>
<td class="m"> </td><td class="s">- </td>
<td class="t">Directory</td>
<td class="d"></td>
</tr>
<tr>
<td class="n">
Big_Buck_Bunny_small.ogv
</td>
<td class="m"> </td><td class="s">4.5MB</td>
<td class="t">video</td>
<td class="d"></td>
</tr>
<tr>
<td class="n">
bunny.mp4
</td>
<td class="m"> </td><td class="s">1.8MB</td>
<td class="t">video</td>
<td class="d"></td>
</tr>
<tr>
<td class="n">
bunny.webm
</td>
<td class="m"> </td><td class="s">2.8MB</td>
<td class="t">video</td>
<td class="d"></td>
</tr>
</tbody>
</table>
<div id="videoPopup"></div>

Get checkbox checked state using JQuery

I am assigned to get the boolean value of a checkbox.
I couldn't find a way to get the boolean value of the checkbox. e.g: true,false.
Is there a way to do this?
Link: https://jsfiddle.net/hongyang1033/ek30dgt9/5/
<body>
<div >
<table border=1px>
<thead>
<tr>
<th colspan="5">Description</th>
<th>Comment</th>
<th>User</th>
<th>Feedback</th>
<th>Status</th>
</tr>
</thead>
<tbody style="border-top : 1px solid black" id = "1">
<tr>
<td class="partition"><label class="label">Title:</label><label class="label ">A</label></td>
<td class="sip" style="border-left:none"><label class="label">Author:</label><label class="label">James</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="bookstore">BookStore</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="ebook">Ebook</label></td>
<td rowspan="4"><input type="checkbox"><label class="label" style="padding-left:0px" id="library">Library</label></td>
<td rowspan="4"><textarea maxlength="180" class="animated" id="usercomment" name="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 80px; width:280px;">The book is ..........</textarea></td>
<td rowspan="4" align="center">Adam<br><button class="label label-primary" id="submit">Submit</button></td>
<td rowspan="4" align="center">Feedback Goes Here<br></td>
<td rowspan="4" align="center"><br>No Feedback Yet</td>
</tr>
<tr>
<td colspan="2" class="def"><label class="label">Genre:</label><label class="label">Fiction</label></td>
</tr>
<tr>
<td colspan="2" class="path"><label class="label label-primary" style="margin-left:5px">BookURL</label><label class="label label-primary " style="margin-left:40px">DownloadLink</label></td>
</tr>
<tr>
<td colspan="2" class="path"><a style="display:none">www.ddd.com/bookurl</a></td>
</tr>
</tbody>
JQuery
$("#submit").click(function() {
var $row = $(this).closest("tbody");
var $text = $row.document.getElementById("#emulation").checked(); //
alert($text);
});

As id is unique, hence, you can get it directly. Use, is() function to check the property.
Update from
var $text = $row.document.getElementById("#emulation").checked();
to
var $text = $("#emulation").is(":checked");

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...

This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);

something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

get JSP list item from Javascript

i have Servlet, JSP page and Javascript. so from servlet i pass list to jsp and it draws results. each result is presented in table and has delete button. so i want to get ID from the result i want to delete and alert value.
${delete} - is button. when there is no session button is hidden, because when session exists i pass String delete = "<input id=\"${emp.id}\" type=\"button\" onclick=\"test()\" value=\"Delete\" class=\"btn\">";
here is JSP Foreach:
<c:forEach items="${requestScope.product}" var="emp">
<table border='1' align='center' cellpadding="5" width="60%" class="products" cellspacing="0" style=" text-align: left; font-size: 13px; color: honeydew;">
<tr>
<td style="font-size: 10px; text-align: right">${emp.addDate}</td>
<td style="text-align: center;">${emp.manufacturer} ${emp.model} ${emp.screenSize}</td>
</tr>
<tr>
<td rowspan="7"></td>
</tr>
<tr>
<td>${emp.category}</td>
</tr>
<tr>
<td>${emp.manufacturer}</td>
</tr>
<tr>
<td>${emp.model}</td>
</tr>
<tr>
<td>${emp.screenSize}</td>
</tr>
<tr>
<td>${emp.amountInStock}</td>
</tr>
<tr>
<td rowspan="2" style="text-align: right; font-size: 20px; font-style: italic;">${emp.price}</td>
</tr>
<tr>
<td style="font-size: 10px;">ID: ${emp.id} ${emp.editDate}</td>
</tr>
</table>
${delete}
<hr>
</c:forEach>

Don't build up HTML in Java. You're mixing responsibilities.
Replace ${delete} with something like follows. Edit as necessary to do what you need.
<button type="button" onclick="alert('Delete ${emp.id}')">Delete</button>