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>
Related
I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the search input, I need it to hide the divs that contain 100 and 200, as they are less than 250. Does this make sense?
This is what I have done so far:
<input type="text" id="search_value" onkeyup="search_filter()">
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value = document.getElementById("div_value").innerHTML;
d_value = parseInt(d_value);
//Hide Divs
if(s_value > d_value){
$(function(){
$(".container").hide();
document.getElementsByTagName(".container")[0].setAttribute("class", "hide_container");
});
}
else {
$(function(){
document.getElementsByTagName(".container")[0].setAttribute("class", "show_container");
});
};
}
I feel like I need to make each div unique but I'm not sure on how to go about creating a long list of div containers with numbers on a table that will hide.
Thanks
You can loop through all the td with class div_value to compare the the text with the value of input element so that you can hide/show based on the condition.
Try with jQuery's .each() the following way:
function search_filter(input) {
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter(this)">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
Please Note: I will suggest you to ignore inline event listeners.
$('#search_value').on('keyup', function(){
var input = this;
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
First, most of your selectors are incorrect.
Do not use multiple ids with the same value (container). Change to a class if you need the same name.
Also if you can use jQuery then use it everywhere, or dont use it at all.
function search_filter() {
//Get Value of input & convert to Int
var s_value = parseInt($("#search_value").val());
$('.container').each((i, element) => {
if (s_value > parseInt($(element).find('.div_value').text())) {
$(element).hide();
$(element).addClass('hide_container')
} else {
$(element).show();
$(element).addClass('show_container')
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
Using vanilla Javascript, I would solve it this way.
On every input event on the <input />, walk through the list of .div_value, and set their closest('container')'s display property accordingly.
const valueDivs = [...document.querySelectorAll('.div_value')]
search_value.addEventListener('input', () => {
for (const valueDiv of valueDivs) {
valueDiv.closest('.container').style.display =
Number(valueDiv.textContent) >= Number(search_value.value)
? 'block'
: 'none'
}
})
<label> Filter by number: <input type="number" min="0" id="search_value" /></label>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">150</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
Here's an example of using a forEach loop to show/hide the divs when you run your function. This uses vanilla javascript.
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value_containers = document.querySelectorAll(".container");
// Loop through divs and hide divs that have a lower value than the search term
d_value_containers.forEach(function(container){
var d_value = container.querySelector(".div_value");
var d_value_interger = parseInt(d_value.innerHTML);
if(s_value > d_value_interger) {
container.style.display = 'none';
} else {
container.style.display = 'block';
}
});
}
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
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
I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?
You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.
Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;