Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm trying to add some text to an array that's dynamically outputted by my database. However, with the way my function is set up currently, it adds each value to it's own separate array. I need them to be pushed to the same array because I need to get the sum of all the numbers that are outputted.
This is my function to convert the text to a number and then push them to an array.
$(".sumCosts").each(function(){
let valuesArray = [];
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
console.log(valuesArray);
})
This is the HTML output. I'm interested in the <td> with class sumCosts, marked with *.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">analysts</td>
***<td class="text-end sumCosts">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">materials</td>
***<td class="text-end sumCosts">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">annual</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is what is logged to the console
[4091]
[6282]
[2873]
[1185]
[313]
I need to be able to put them into the same array so that I can get a sum of all the numbers. Any advice on how to achieve this is greatly appreciated! Thanks!
You had to just move valuesArray Outside the function nothing more !
Using vanilla js
JS
let ele = document.querySelectorAll(".sumCosts")
let ar = Array.from(ele)
let valuesArray = [];
ar.forEach(ele => {
let values = parseInt(ele.innerText.replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
jQuery
let valuesArray = [];
$(".sumCosts").each(function() {
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
Related
I want to display the my tasks object properties as shown in the html page. My tasks have attributes of title and progress. The attributes are not showing however. Is it because of the way I did the map function in my template.helpers() is wrong? Thanks
My blaze template
<tbody>
{{#each displayAllTasks}}
<tr>
<td class="highlight">
<div class="success"></div>
{{counter}}
</td>
<td class="hidden-xs"> {{ task_item }} </td>
<td> {{ task_progress }}% </td>
<td> Bob Marley </td>
<td>
<a href="javascript:;" class="btn btn-outline btn-circle btn-sm purple">
<i class="fa fa-edit"></i> Edit </a>
</td>
</tr>
{{/each}}
</tbody>
My template is shown below
Template
.personalTask
.helpers({
displayAllTasks() {
counter = 1
return Tasks.find({}).map(function(item) {
return {
task_item: item.title,
task_progress: item.progress,
counter: counter++
}
})
}
})
Does it print any rows?
Anyway i'd do it lile this. You dont need a counter etc.
Template Helper:
Template
.personalTask
.helpers({
displayAllTasks() {
return Tasks.find({})
}
})
Blaze Template:
<tbody>
{{#each item in displayAllTasks}}
{{#let counter=#index}}
<tr>
<td class="highlight">
<div class="success"></div>
{{counter}}
</td>
<td class="hidden-xs"> {{ item.title }} </td>
<td> {{ item.progress }}% </td>
<td> Bob Marley </td>
<td>
<a href="" class="btn btn-outline btn-circle btn-sm purple">
<i class="fa fa-edit"></i> Edit </a>
</td>
</tr>
{{/let}}
{{/each}}
</tbody>
However, if you want counter to be 1 based instead of zero, you will need a helper function for +1. I also removed javascript:; from links.
I have a table with dynamic content, it can be 1 or more rows, most likely up to 200. The user should be able to click on a single row and additional content should be displayed underneath in another table list.
Now, when i search for an item, the table shrinks according to the found records, lets say i have 5 records and look for 1 record, the entire table element underneath jumps up. This is not a good ux.
I know there is a way to keep the height of the table or table body?
here is my code so far. You can search by "meyer"
function reservationListFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("reservationListInput");
filter = input.value.toUpperCase();
table = document.getElementById("reservationTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
if (!tr[i].classList.contains('header')) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}
}
}
}
jQuery(document).ready(function($) {
$('#reservationTable tr').each(function () {
var td_value = $('td',this).eq(4).text();
console.log(td_value);
switch (td_value) {
case 'Expected':
$(this).addClass('table-success');
break;
case 'Inhouse':
$(this).addClass('table-info');
break;
case 'Cancelled':
$(this).addClass('table-danger');
break;
case 'Partial':
$(this).addClass('table-warning');
break;
case 'Finished':
$(this).addClass('table-active');
break;
default:
// statements_def
break;
}
});
});
$( document ).ready(function() {
$("#wrapper").toggleClass("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="" id="reservationListTable">
<div class="row">
</div>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<div classs="container">
<table class="table table-responsive table-fixed table-fixedResList" id="reservationTable">
<thead class="">
<tr class="header">
<th style="width:40%;">Name</th>
<th style="width:10%;">Cabin</th>
<th style="width:10%;">Guests</th>
<th style="width:10%;">Table</th>
<th class="hidden-xs-down" style="width:10%;">Status</th>
<th class="hidden-xs-down" style="width:5%;">SR</th>
<th class="hidden-xs-down" style="width:5%;">DOB</th>
<th style="width:10%;">Action</th>
</tr>
</thead>
<tbody class="">
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Julia Sanders</td>
<td class="">10293</td>
<td class="">4</td>
<td class="">201</td>
<td class="hidden-xs-down">Cancelled</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Mirko Meyer</td>
<td class="">13293</td>
<td class="">2</td>
<td class="">132</td>
<td class="hidden-xs-down">Partial</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<table class="table table-responsive table-fixed" id="reservationDetailTable">
<tr class="header">
<th style="width:20%;">Primary Guest</th>
<th style="width:80%;">Info</th>
</tr>
<tr>
<td rowspan="8">
<div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
<img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Mark Meyer</h4>
<p class="card-text">Cabin 23412</p>
EDIT
</div>
</div>
</td>
<td>Reservation ID</td>
</tr>
<tr>
<td>Guests Associated</td>
</tr>
<tr>
<td>Reservation Date</td>
</tr>
<tr>
<td>Special Request</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Based on the comments, you want to give the tbody a fixed hight, so the header is always visible. How this can be done is already discribed here: https://stackoverflow.com/a/23989771/639035
You need the css:
#reservationTable thead, #reservationTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#reservationTable tbody {
height: 100px;
table-layout: fixed;
overflow: auto;
display: block;
width: 100%;
}
function reservationListFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("reservationListInput");
filter = input.value.toUpperCase();
table = document.getElementById("reservationTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
if (!tr[i].classList.contains('header')) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}
}
}
}
jQuery(document).ready(function($) {
$('#reservationTable tr').each(function () {
var td_value = $('td',this).eq(4).text();
console.log(td_value);
switch (td_value) {
case 'Expected':
$(this).addClass('table-success');
break;
case 'Inhouse':
$(this).addClass('table-info');
break;
case 'Cancelled':
$(this).addClass('table-danger');
break;
case 'Partial':
$(this).addClass('table-warning');
break;
case 'Finished':
$(this).addClass('table-active');
break;
default:
// statements_def
break;
}
});
});
$( document ).ready(function() {
$("#wrapper").toggleClass("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
#reservationTable thead, #reservationTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#reservationTable tbody {
height: 100px;
table-layout: fixed;
overflow: auto;
display: block;
width: 100%;
}
</style>
**Full Code:**
(Tested in Chrome)
<div class="container" style="" id="reservationListTable">
<div class="row">
</div>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<div classs="container">
<table class="table table-responsive table-fixed table-fixedResList" id="reservationTable">
<thead class="">
<tr class="header">
<th style="width:40%;">Name</th>
<th style="width:10%;">Cabin</th>
<th style="width:10%;">Guests</th>
<th style="width:10%;">Table</th>
<th class="hidden-xs-down" style="width:10%;">Status</th>
<th class="hidden-xs-down" style="width:5%;">SR</th>
<th class="hidden-xs-down" style="width:5%;">DOB</th>
<th style="width:10%;">Action</th>
</tr>
</thead>
<tbody class="">
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Julia Sanders</td>
<td class="">10293</td>
<td class="">4</td>
<td class="">201</td>
<td class="hidden-xs-down">Cancelled</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Mirko Meyer</td>
<td class="">13293</td>
<td class="">2</td>
<td class="">132</td>
<td class="hidden-xs-down">Partial</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<table class="table table-responsive table-fixed" id="reservationDetailTable">
<tr class="header">
<th style="width:20%;">Primary Guest</th>
<th style="width:80%;">Info</th>
</tr>
<tr>
<td rowspan="8">
<div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
<img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Mark Meyer</h4>
<p class="card-text">Cabin 23412</p>
EDIT
</div>
</div>
</td>
<td>Reservation ID</td>
</tr>
<tr>
<td>Guests Associated</td>
</tr>
<tr>
<td>Reservation Date</td>
</tr>
<tr>
<td>Special Request</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
I have got two tables mytable1 and mytable2
I am trying to move the checked tr rows (from table mytable1) to different table mytable2
I have tried as following
$(document).ready(function() {
$(document).on("click", ".movemultiple", function(event)
{
$('.mytable1 > tbody > tr').each(function() {
$(this).find('td:eq(0) .updatecheckboxvalueindb:checked')
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
Could you please let me know how to do this ?
http://jsfiddle.net/o2gxgz9r/1879/
You could use jQuery .closest() to get the closest table row (or table cell) and jQuery .remove() to remove the table cell with the checkbox from DOM:
$(document).ready(function () {
$(document).on('click', '.movemultiple', function() {
var $myTable2Body = $('.mytable2 tbody');
$('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) {
var $checkbox = $(item);
$myTable2Body.append($checkbox.closest('tr'));
$checkbox.closest('td').remove();
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
JSFiddle
like this?
$(document).on("click", ".movemultiple", function(event){
$('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove();
});
check out the fiddle : http://jsfiddle.net/h9q8o340/
I need to get the text in <tr>. This is my html code:
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente"><tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr></tbody>
</table>
I need to extract the first <td> in <tr> that is "prova" in this example so I use this jquery code:
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+JSON.stringify($(this)));
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
But it doesn't work because it prints me TABELLA 0 Tabella {"0":{},"context":{},"length":1}
Anyone can help me?
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+$(this).first().text());
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>
You should use a better selector instead of children. Then you need do select the td inside your each.
$('#tbody_aggiungi_utente tr').each(function(i) {
var firstTd = $("td:eq(0)", this);
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify(firstTd.text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
Or you loop the td's directly:
$('#tbody_aggiungi_utente tr td:first-of-type').each(function(i) {
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify($(this).text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr id="aggiungiprova">
<td>prova 2</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
replace each(function(i) with each(function(i,v) and then console.log( $(v).text().trim());
Output will be 'prova'
$('#tbody_aggiungi_utente').children('tr').each(function(i,v) {
console.log( $(v).text().trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm">
<i class="fa fa-times" aria-hidden="true"></i></button>
</td>
</tr>
</tbody>
</table>
Use children.
$(this).children('td:eq(0)').html());
$('#tbody_aggiungi_utente > tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+
" Tabella "+JSON.stringify($(this).children('td:eq(0)').html()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
<tr id="aggiungiprova1"><td>prova1</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>
Take a look at CSS Selectors. jQuery can select elements using the same methods.
console.log(jQuery("#aggiungiprova td:first-child"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
This should work...
a = $('#tabella_username_aggiunti tr th')
console.log(a.text())
//or
a.each(function(a, el) {
console.log($(el).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
$("#aggiungiprova td").first().text();
Gives the content of the first td in the tr named "aggiungiprova".
If you need to get all names in the entire list, then:
var names = [];
$("#tabella_username_aggiunti tr").each(function(){
names.push( $("td",this).first().text());
});
// names is now an array of all names
Or you name [sic] all name TDs with class and iterate them for easier-to-read code and faster execution:
<table>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
</table>
JS:
$('.name-cell').each(function(){
// $(this).text()
});
I am wondering about one thing.
Have a UI html table with two records and would like to click on a record only with exact value.
Something like for instance:
SELECT record WHERE tr data-user LIKE "testuser1"
Is it possible to do that in some simple way ?
<table class="table table-striped">
<thead>
<tr>
<th>
<input type="checkbox" disabled="">
</th>
<th data-sort="status">Status
<i class="fa fa-sort-"></i>
</th>
<th data-sort="name">Name
<i class="fa fa-sort-"></i>
</th>
<th data-sort="position">Position
<i class="fa fa-sort-"></i>
</th>
<th data-sort="userCode">ID
<i class="fa fa-sort-asc"></i>
</th>
<th data-sort="email">e-mail
<i class="fa fa-sort-"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-user="testuser1">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.anpilov" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
</tr>
<tr data-user="testuser2">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.puchaujara" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
</tr>
</tbody>
</table>
Tried to do it like that:
getDriver().findElement(By.xpath("//div[#id='content'//div[#class='container'//table[#class='table table-striped'//following::tbody//tr[#data-user='testuser1']")).click();
but did not work ... :(
Maybe you can use xpath expression using value attribute. For example, to select certain element with id and value and click on it:
driver.findElement(By.xpath("//*[#id='" + yourId + "' and #value='" + yourValue + "']")).click();
Or a td whith a text inside (be aware that td tag has no value, it has a text inside):
driver.findElement(By.xpath("//td[text()='" + yourTdText + "']")).click();
If you can build an unique xpath to identify what you are looking for this should be your best option even if you don't know the id or the tag type.
Subject to close.
Final solution:
getDriver().findElement(By.xpath("//tr[#data-user='testuser1']")).click();