Goal:
When you press a specific button for instance button id="button_a", you should retrieve the value from id="a1" and then it should display as alert message.
Problem:
When you have a table between 100 and 200 rows, you cannot hard code the specific id name in the javascript.
Question:
How should you retrieve the value of the for instance id="a1" when you have pressed the button?
I have tried and learned that you use "previousSibling" (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_previoussibling) but it more complicated that I have expected.
<table>
<tr>
<td><div id="a1"><div id="aa1">aa1</div></div></td>
<td><div id="a2"><div id="aa2">aa2</div></div></td>
<td><button id="button_a"></button></td>
<td></td>
</tr>
<tr>
<td><div id="b1"><div id="bb1">bb1</div></div></td>
<td><div id="b2"><div id="bb2">bb2</div></div></td>
<td><button id="button_b"></button></td>
<td></td>
</tr>
<tr>
<td><div id="c1"><div id="cc1">cc1</div></div></td>
<td><div id="c2"><div id="cc2">cc2</div></div></td>
<td><button id="button_c"></button></td>
<td></td>
</tr>
<tr>
<td><div id="d1"><div id="dd1">dd1</div></div></td>
<td><div id="d2"><div id="dd2">dd2</div></div></td>
<td><button id="button_d"></button></td>
<td></td>
</tr>
</table>
If I understand right you want the value of first div inside tr on button click. You can use:
$("button").on("click", function() {
var val = $(this) //referes to the dom element, in this case the button
.parents("tr") //get ancestor tr of the clicked element(button)
.find("td:first-child > div") //find first td that has direct child div
.text(); //get the text value of the div element
$(this).after("<span>" + val + "</span>");//for test purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a1">
<div id="aa1">aa1</div>
</div>
</td>
<td>
<div id="a2">
<div id="aa2">aa2</div>
</div>
</td>
<td>
<button id="button_a">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="b1">
<div id="bb1">bb1</div>
</div>
</td>
<td>
<div id="b2">
<div id="bb2">bb2</div>
</div>
</td>
<td>
<button id="button_b">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="c1">
<div id="cc1">cc1</div>
</div>
</td>
<td>
<div id="c2">
<div id="cc2">cc2</div>
</div>
</td>
<td>
<button id="button_c">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="d1">
<div id="dd1">dd1</div>
</div>
</td>
<td>
<div id="d2">
<div id="dd2">dd2</div>
</div>
</td>
<td>
<button id="button_d">Click!</button>
</td>
<td></td>
</tr>
</table>
References
.parents()
.find()
:first-child
With the jQuery you can navigate by tree easily. What you can do it the following:
$('#button_a').on('click', function(e) {
var div_a1 = $(this).closest('tr').find('div').first();
// and so on
}
Read more at jQuery documentation
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>
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});
Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});
you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});
Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>
I am trying to change the value of an td value with the button that is clicked.. I have tried a couple of ways but none have worked. If user click Show USD button column show only USD values, If user click GBP column should show GBP values. I don't know this this is correct way to do this. Any help highly appreciated.
$('.btn-usd').on('click', function(){
$("cu-usd").removeClass(hide);
$("cu-gbp").addClass(hide);
});
$('.btn-gbp').on('click', function(){
$("cu-gbp").removeClass(hide);
$("cu-usd").addClass(hide);
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
<tbody>
<tr>
<td>
<div class="cu-usd">$10</div>
<div class="cu-gbp">£7.10</div>
</td>
<td>
<div class="cu-usd">$20</div>
<div class="cu-gbp">£14.20</div>
</td>
<td>
<div class="cu-usd">$30</div>
<div class="cu-gbp">£21.30</div>
</td>
<td>
<div class="cu-usd">$40</div>
<div class="cu-gbp">£28.10</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<div class="cu-usd">$100</div>
<div class="cu-gbp">£70.10</div>
</td>
<td>
<div class="cu-usd">$200</div>
<div class="cu-gbp">£140.20</div>
</td>
<td>
<div class="cu-usd">$300</div>
<div class="cu-gbp">£210.30</div>
</td>
<td>
<div class="cu-usd">$400</div>
<div class="cu-gbp">£280.10</div>
</td>
</tr>
</tbody>
</table>
There are 2 problems
Class selector starts with .
hide is a string must be in quotes
Following will work
$('.btn-usd').on('click', function(){
$(".cu-usd").removeClass("hide");
$(".cu-gbp").addClass("hide");
});
$('.btn-gbp').on('click', function(){
$(".cu-gbp").removeClass("hide");
$(".cu-usd").addClass("hide");
});
$(".cu-usd").removeClass('hide');
$(".cu-gbp").addClass('hide');
$('.btn-usd').on('click', function(){
$(".cu-usd").removeClass('hide');
$(".cu-gbp").addClass('hide');
});
$('.btn-gbp').on('click', function(){
$(".cu-gbp").removeClass('hide');
$(".cu-usd").addClass('hide');
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
<tbody>
<tr>
<td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td>
<td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td>
<td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td>
<td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td>
<td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td>
<td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td>
<td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td>
</tr>
</tbody>
</table>
$('.btn-usd').on('click', function() {
$(".cu-usd").removeClass('hide');//missing .
$(".cu-gbp").addClass('hide');//missing .
});
$('.btn-gbp').on('click', function() {
$(".cu-gbp").removeClass('hide');//missing .
$(".cu-usd").addClass('hide');//missing .
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
<tbody>
<tr>
<td>
<div class="cu-usd">$10</div>
<div class="cu-gbp">£7.10</div>
</td>
<td>
<div class="cu-usd">$20</div>
<div class="cu-gbp">£14.20</div>
</td>
<td>
<div class="cu-usd">$30</div>
<div class="cu-gbp">£21.30</div>
</td>
<td>
<div class="cu-usd">$40</div>
<div class="cu-gbp">£28.10</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<div class="cu-usd">$100</div>
<div class="cu-gbp">£70.10</div>
</td>
<td>
<div class="cu-usd">$200</div>
<div class="cu-gbp">£140.20</div>
</td>
<td>
<div class="cu-usd">$300</div>
<div class="cu-gbp">£210.30</div>
</td>
<td>
<div class="cu-usd">$400</div>
<div class="cu-gbp">£280.10</div>
</td>
</tr>
</tbody>
</table>
Missing . in class name
There are some problems with your code.
$('.btn-usd').on('click', function(){
$(".cu-usd").removeClass('hide');
$(".cu-gbp").addClass('hide');
});
$('.btn-gbp').on('click', function(){
$(".cu-gbp").removeClass('hide');
$(".cu-usd").addClass('hide');
});
Use . operator for class element and wrap hide in quotes as it is passed as string.
Also to optimize take out $(".cu-usd") and $(".cu-gbp") in variables.
You can also do it with .hide() and .show() and don't have to assign a class. The result is the same.
and as mentioned before missing . in classname. But I think that you know that by now.
$('.btn-usd').on('click', function(){
$(".cu-usd").show();
$(".cu-gbp").hide();
});
$('.btn-gbp').on('click', function(){
$(".cu-gbp").show();
$(".cu-usd").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
<tbody>
<tr>
<td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td>
<td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td>
<td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td>
<td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td>
<td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td>
<td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td>
<td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td>
</tr>
</tbody>
</table>