Develop Reference

Meteor - get object from Footable with a button in hidden column

I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?

AspNet Two Tables on a View

I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>

You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx

Add Table Class/Remove Table Class to rows on AJAX Request

I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
</tbody>
</table>
I have a script that runs when you click the "Yes" button to select a row to add a class to the selected table row - this is working well - to highlight the selected row green. The user is only allowed to select one row before they submit the form so I now need to modify this so that when they select a table row it highlights the selected row in green but removes any table row classes for all other table rows in the table.
Here's my script at the moment:
$(document).ready(function() {
$('button.btn-success').click(function() {
var refreshItemID = $(this).closest('tr').attr('id');
console.log(refreshItemID);
// Create a reference to $(this) here:
$this = $(this);
$.post('updateStaffSelection.php', {
refreshItemID: refreshItemID,
selectionType: 'yes'
}, function(data) {
data = JSON.parse(data);
if (data.error) {
console.log(data);
console.log('something was wrong with the ajax request');
$this.closest('tr').addClass("warning");
//make alert visible
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
console.log('update successful - success add class to table row');
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
//$(this).closest('tr').attr('class','success');
}
}).fail(function(xhr) {
console.log('ajax request failed');
// no data available in this context
$this.closest('tr').addClass("warning");
//make alert visible
$("#alert_ajax_error").show();
});
});
});
I'm hoping it's possible to extend this to also remove any classes for the non selected row so that only the selected row has the success class added but not sure where to start here.

Remove the relevant classes that you need once the button was clicked from all of the tr elements in the table, and add the relevant class only to the specific tr.
$(function() {
$('button.btn-success').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
// Add the class only to the specific TR element
$(this).parents('tr').addClass('success');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
</tbody>
</table>

Javascript Array displaying new entries on the front instead of back

I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?

Bootstrap accordion toggle inside a table and changing the background color of the selected row on click

I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.
How would I achieve that?
Here is the HTML markup I currently have:
<table class="table">
<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div>
</td>
</tr>
</tbody>
</table>
and the CSS:
.hiddentablerow{
padding: 0px 0px !important;
background-color: #DDD;
}
And of course a fiddle: http://jsfiddle.net/kxtk6w4y/

You can use jQuery to fire an onClick for the row clicked that toggles the hidden row.
Fiddle
And here's the snippet I created for it:
$('.accordion-toggle').click(function() {
if ( $(this).attr('aria-expanded') == "true" ) {
$(this).children().css('background-color', '#FFF');
} else {
$(this).children().css('background-color', '#DDD');
}
});