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 can I have the search results page stay in place be remembered whilst navigating back and fourth to it?

When I click the 'back' button or the 'refresh/reload' button in the browser my search/filtered results disappear even though the 'input box' stays OK and remembers the typed keyword. How can I have the results page stay with the keyword whilst navigating back and fourth to the page, or refreshing/reloading?
var input, table, rows, noMatches, tr, markInstance;
$(document).ready(function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.querySelectorAll('#myTable table tr:first-child');
rows = document.querySelectorAll('#myTable table tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({ done: highlightMatches });
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function(row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr').addClass('show'); $(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
/* Prevents Return/Enter key from doing anything */
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
/* Prevents Return/Enter key from doing anything */
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid ~ .hints {
display: block;
}
#noMatches:empty, #noMatches:empty + .hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
#myTable table tr:first-child td mark {
background: orange;
font-weight: bold;
color: black;
}
mark {
background: initial;
} .style1 {
text-align: left;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
<head>
<body>
<div class="input-wrap">
<label>
Search
<input id="myInput" type="text" required
placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
<br />
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<br />
<table style="width: 100%">
<tr>
<td>
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type1</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title1</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description1</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date1</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type2</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title2</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description2</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date2</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type3</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title3</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description3</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date3</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>

Save multiple table objects in single array using ng-click

I have on table with 3 colums.There is no required field in my table.
when I click on save button each row should be save as separate object in a single array.
1.If document is not uploaded ,that can be empty.2.checkbox is checked it should be true otherwise false. 3.But Name should be in each object.
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa'
},{
'name': 'bbb'
},{
'name': 'ccc'
}];
$scope.saveDetails = function(doc) {
if ($('#status').is(':checked')) {
doc.status = 'true'
} else {
doc.status = 'false'
}
console.log(doc)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
Any help?Thanks!!

you dont need to jquery methods
try follwing:
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa',
file: "",
status:false
},{
'name': 'bbb',
file: "",
status:false
},{
'name': 'ccc',
file: "",
status:false
}];
$scope.saveDetails = function(doc) {
console.log($scope.listName)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>

Angular JS: table with dynamic number of titles

I tried to create a table with a dynamic number of titles and sub titles. It should look like this:
Each title has 3 sub titles. But I can not know in advance how much headline I will have.
So in HTML it looks like:
<table class="table table-hover col-xs-12">
<thead>
<tr>
<th rowspan="2">Type ID</th>
<th colspan="3" ng-repeat="val in ctrl.vals">
<div class="val">
<span title="{{val}}">{{val}}</span> <!-- this is title -->
</div>
</th>
</tr>
<tr>
<th class="row-header" ng-repeat="val in ctrl.getNumberColumn() track by $index">{{ $index%3 == 0 ? "subtitle1" : $index%3 == 1 ? "subtitle2" : "subtitle3" }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="key in ctrl.keys">
<td class="row-key">{{key}}</td>
<td class="row-value" ng-repeat="val in ctrl.getNumberColumn() track by $index">
<div class="list-group" ng-init="data = ctrl.getDataByIndex($index, ctrl.items[key])">
<a class="list-group-item" ng-if="$index%3 == 0">{{data.avg_fps}} </a>
<a class="list-group-item" ng-if="$index%3 == 1">{{data.avg_cpu}} </a>
<a class="list-group-item" ng-if="$index%3 == 2">{{data.session}} </a>
</div>
</td>
</tr>
</tbody>
</table>
I understand that it looks confusing - so I would like to ask - is there an option for more simply constructing such a table?

angular.module('app', []).controller('ctrl', function($scope) {
$scope.titles = [{
title: 'One',
items: ['Sub1_1', 'Sub1_2']
}, {
title: 'Two',
items: ['Sub2_1']
},{
title: 'Three',
items: []
},
{
title: 'Four',
items: ['Sub4_1', 'Sub4_2', 'Sub4_3']
}];
})
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<table>
<thead>
<tr>
<th rowspan="2">TypeId</th>
<th ng-repeat='item in titles' colspan='{{item.items.length}}' rowspan='{{item.items.length > 0 ? 1 : 2}}'>
{{item.title}}
</th>
</tr>
<tr>
<th ng-repeat-start='item in titles' ng-if='false'></th>
<th ng-repeat-end ng-repeat='sub in item.items'>{{sub}}</th>
</tr>
</thead>
</table>
</div>

vuejs v-if condition for input model

i m just learn vue.js
and i want to display a table data.my opinion is when display mode the table just show. and when i click edit button of the line of the table, i want this line convert to model.
this is my code:
```
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<template v-for="data in apidata" track-by="$index">
<tr>
<td>{{$index + 1}}</td>
<td>
<div v-show="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</template>
</tbody>
</table>
```
my data is like this
[{name:'test', pass:'1'}, {name:'test2', pass:'2'}]
i bind a edit()function to listen the click event.
edit: function(data){
alert(data.editmode);
data.editmode = true;
}
i think when i click .becuase the data.editmode will change to true.
this line will convert to input mode . but its useless.
i have tried v-if=data.editmode , v-if="data.editmode" ,v-show="data.editmode" , still got nothing
i dnt know why?

You just need to include editmode in your data declaration so that it is a reactive data item.
new Vue({
el: 'body',
data: {
apidata: [{
name: 'test',
pass: '1',
editmode: false
}, {
name: 'test2',
pass: '2',
editmode: false
}]
},
methods: {
edit: function(data) {
data.editmode = !data.editmode;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in apidata">
<td>{{$index + 1}}</td>
<td>
<div v-if="data.editmode">
<input v-model="data.name">
</div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode>
<input v-model="data.pass">
</div>
<div v-else>{{data.pass}}</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</tbody>
</table>