I want to be able to click a button on a table and update the row information. I have the back-end all set up to do this. I am just having trouble being able to get at the table generated by angular. Here is my html template:
<br />
<table id="recordTable" border="1px">
<tr><td ng-repeat="column in columns"><strong>{{column.column_name}}</strong></td> </tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells"> {{cell}} </td>
<td><button ng-click="delete($index)">Delete</button></td>
<td><button ng-click="update($index)">Update</button></td>
</tr>
</table>
<br />
When I call the function update($index), I would like to be able to turn the text that is currently filled with {{column.column_name}} into a text input with the {{column.column_name}} as the default text. I could not find anything in the Docs for this. Any thoughts?
I've made a slight change to the record.cells array, now it is [{value : 'Value1'},{value : 'Value2'}]
<table id="recordTable" border="1px">
<tr>
<td ng-repeat="column in columns">
<strong>{{column.column_name}}</strong>
</td>
</tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells">
<span ng-show="mode != 'edit'">{{cell.value}}</span>
<input ng-show="mode == 'edit'" ng-model="cell.value" />
</td>
<td><button ng-click="delete($index)">Delete</button></td>
<td>
<button ng-show="mode != 'edit'" ng-click="mode = 'edit'">Update</button>
<button ng-show="mode == 'edit'" ng-click="mode = null">Save</button>
</td>
</tr>
</table>
Demo: Plunker
Related
I'm trying to get all the tds in a table that contain a tr with a button to which I have specified an attribute ("boolean") with a true or false value. I need to get each td that have that attribute with value true but I can't figure out how to get it using jquery.
The structure would be the following:
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
I have tried to do something like this:
function colour() {
$("#table tbody tr").each(function() {
let colour = $(this).children("td")[1];
}
}
But I can't go from there to get those td since I have no experience with jquery
How could I get the td with row-id 1 and 3 with Jquery and then apply a style to those td?
Thanks in advance
Use a has selector with attribute selector
var trs = $('tr:has(button[boolean="true"])');
console.log(trs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
$("#table tbody tr").each(function() {
//Filter to iterate those td's which contain Boolean true
if($(this).find('button').attr('boolean')=="true"){
let colour = $(this).children("td")[1];
colour.style.backgroundColor="red";
console.log(colour);
}
})
is there some way to lock a tr at the end of a table with VUE or Js?
I have a Vue-Component which adds tablerows dynamically based on an API call, but I need one specific tr to be at the bottom and if a new tr is added, it should be above the last one.
Not in the tfoot because there is some other nformation
Here is the Vue-Component
<tbody>
<tr is="deliverytable"
v-for="delivery in deliveries"
v-bind:key="delivery.id"
v-bind:delivery="delivery"></tr>
</tbody>
Template of the Vue-Component
<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
<td>
<div v-if="delivery.is_printable">
<input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
</div>
</td>
<td>[[ delivery.dispatched ]] Uhr</td>
<td>[[ delivery.action ]]</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
<div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
<div v-else-if="delivery.event != 0" #change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
</td>
<td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
<td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
<td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
<td>
<a v-if="delivery.is_deletable" type="button" #click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
</td>
</tr>
If your components iterated over in a loop you can render this specific after loop above
<table>
<thead>
some headers
</thead>
<tbody>
<tr v-for="(rowItem, key, index) in dataTable" :key="index">
your API call items
</tr>
<tr>
your specific item
</tr>
</tbody>
</table>
I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}
This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.
I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am trying to make a expandable rows to the table. I do not get any error messages but it is not working as expected. I suspect there is something wrong how I am using expressions with ng-show here?
plunker
my code:
<table class='table'>
<thead>
<tr>
<th>name</th>
<th>itemOne</th>
<th>itemTwo</th>
</tr>
</thead>
<tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
<tr>
<td>
<button ng-show="data.expand" ng-click='data.expand = true'>+</button>
<button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
<input type="checkbox" class='checkbox'>
<a rel="noopener" target="_blank" href={{data.url}}>
{{data.name}}
</a>
</td>
<td>{{data.valueMain}}</td>
<td>{{data.tValue}}</td>
<tr>
<tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
<td>
{{subs.name}}
</td>
<td>
{{subs.valueSub}}
</td>
<td>
{{subs.tValue}}
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
Try this out
<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>
updated plunker
https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview