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?
Related
I'm creating a table with 4 columns(id, DestinationURL, ShortLink, Action(copy)). All the data is coming from the database and I'm creating the content with a for-each loop in my JSP page. The output page looks like this
Before action column there is a hidden field that hold the baseURL+ ShortURL i.e. http://localhost:8080/qcX4h6. Here is my code to create this table
<table class="table table-responsive table-striped table-hover table-bordered vertical-alien-middle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Destination Url</th>
<th>Short URL</th>
<!--<th width="20%" colspan="3">Actions</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="links" items="${data}">
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>${links.getShortUrlLink()}</td>
<td id="copyTd" hidden="">
<input type="text" id="${links.getId()}" value="${baseUrl}/${links.getShortUrlLink()}">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink(${links.getId()})">
Copy
</button>
</td>
<!--<td><button type="submit" class="btn btn-primary btn-block">Edit</button></td>-->
<!--<td><button type="submit" class="btn btn-danger btn-block">Delete</button></td>-->
</tr>
</c:forEach>
</tbody>
</table>
The copy command is working fine for the first button but not for all subsequent buttons. Here is my javascript function
function copyShortLink(id) {
var input = document.getElementById(id);
var td = document.getElementById("copyTd");
/* Select the text field */
td.hidden = false;
input.select();
input.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
td.hidden = true;
}
So my question is how can I make the other buttons work with the same function. I'm passing the hidden input field's id in the function so why it works only for the first button and not for others.
Any help will be appreciated. Thanks in advance
In your code i.e: id="copyTd" this will be copied the first row ,as same id cannot used for all row ,instead you can append some value to your <td id=""> i.e : copyTd_${links.getId()} here , add link id to uniquely identify each td. and just add document.getElementById("copyTd_" + id); this your js code.Changes you need to do in your code is as follows :
Jsp code :
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>${links.getShortUrlLink()}</td>
<!--added links_id to your td-->
<td id="copyTd_${links.getId()}" hidden="">
...
</td>
</tr>
Javscript code :
function copyShortLink(id) {
var input = document.getElementById(id);
/*add same id to select particular td*/
var td = document.getElementById("copyTd_" + id);
...
}
With Dummy Data :
function copyShortLink(id) {
var input = document.getElementById(id);
var td = document.getElementById("copyTd_" + id);
/* Select the text field */
td.hidden = false;
input.select();
input.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
console.log("Text copied ..." + input.value);
td.hidden = true;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-responsive table-striped table-hover table-bordered vertical-alien-middle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Destination Url</th>
<th>Short URL</th>
<!--<th width="20%" colspan="3">Actions</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="links" items="${data}">
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>abc.in</td>
<td id="copyTd_abc" hidden="">
<input type="text" id="abc" value="abc.in">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abc')">
Copy
</button>
</td>
</tr>
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>abcd.com</td>
<td id="copyTd_abcd" hidden="">
<input type="text" id="abcd" value="abcd.com">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abcd')">
Copy
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
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?
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>
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>
<button type="button" class="btn btn-danger btn-sm">No</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>
<button type="button" class="btn btn-danger btn-sm">No</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>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?
Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});
<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">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.
I have the following HTML code:
<tr id="cv643" ondblclick="onCVE(643)">
<td colspan="2">
<a onclick="btnCVA(41,643)" href="#">
Actions
<span class="badge badgew">2</span>
</a>
</td>
<td>Confirm Appointment</td>
<td>29-12-2015</td>
<td style="color: red">12-01-2016</td>
<td style="color: red">Pending</td>
<td colspan="2"></td>
</tr>
Client code is:
function btnCVA(cpkey, cvkey) {
var sel, tbl;
if (onHideCVA()) { // test if Action list already there
$.ajax call to create table row with id 'recCVA'
}
}
function onHideCVA() {
var sel, rc=1;
if ((sel = document.getElementById('recCVA')) !== null) {
sel.parentNode.removeChild(sel);
rc=0;
}
return rc;
}
When the Actions button is clicked, btnCVA creates a row underneath with the recCVA structure, the row contains a sub-table with a button on the [thead] to call onHideCVA, which removes the recCVA tr structure as such:
<tr id="recCVA">
<td></td>
<td colspan="7">
<table id="tblCVA" class="table table-condensed">
<thead id="Q643">
<tr class="lpinfo">
<th></th>
<th>Action</th>
<th>Date</th>
<th>User</th>
<th>Recipient</th>
<th>Due Date</th>
<th>Status</th>
<th>Note</th>
<th style="text-align:right">
<button id="addCVA" class="btn btn-info btn-xs" onclick="btnCVAA(643)">Add Action</button>
<button class="btn btn-info btn-xs" onclick="onHideCVA()">- </button>
</th>
</tr>
</thead>
<tbody>
(Lots of trs)
</table>
So there is a call to onHideCVA from btnCVA, and a straight call to onHideCVA on the inner button.
In instances where the page is larger than the screen, if I click on the button which calls onHideCVA directly, the recCVA row is removed, and the page does not scroll. Just what I want. If I click on the btnCVA a-link, onHideCVA is called indirectly, the row is removed, but the page scrolls to the top. Not what I want.
I can't figure this out. Calling onHideCVA directly removes the row and nothing. Calling onHideCVA indirectly via btnCVA removes the row but scrolls to the top of page. Very confusing.
Firefox 40.0.3.
Any help? Thanks. Eric.