I have a webpage having multiple tables with check boxes. On UI, onclick of a button all the checkboxes are enabled. I want to automate this process using phantomjs.
I tried clicking the button from phantomjs - it does click but does not enable check boxes.
I tried enabling single checkbox. But it did not enable.
Is it unable to find selectAll()? Is there anyway to debug phantomjs.
function () {
page.evaluate(function () {
if ($("id_SelectAllButton").click())
{
if (!this.checked)
{
document.getElementById("id_checkbox1").disabled = false;
}
}
});
}
<div class='Section1'>
<h3>Section 1</h3>
<table width='90%'>
<tr>
<td colspan='4'> <input id = 'id_SelectAllButton' type='button' value='SelectAll' onclick='selectAll(this.parentElement)'/></td>
</tr>
<tr>
<td></td>
<td class='b'>Name</td>
<td class='b'>DOB</td>
<td class='b'>Rank</td>
</tr>
<tr>
<td><input id='id_checkbox1' type='checkbox'></td>
<td>Abc</td>
<td>01/01/0001</td>
<td>2</td>
</tr>
</table>
</div>
I really appreciate your help!
I'm assuming the button you're targeting has an id="id_SelectAllButton" attribute. If so, you select it with a # before the ID: $("#id_SelectAllButton").click(). Similarly, target any other IDs.
Related
Working on a table which hides rows using a toggle/on-click action. a CLASS or an ID, depending on which button has been clicked. Everything is showing on first page/table load, clicked on a button, anything with that CLASS ID will remain, everything else vanishes/becomes hidden until another button is clicked. Some times will have more than one targettable class, so it is possible to cause them to be viewable with different button clicks. I will have a total of seven buttons, possibly more later, I've placed my latest attempt below which is being run in a bootstrap 4 framework, but I've removed all bootstrap elements for the moment as I try to resolve the hide/show behavior. I have googled on the subject, I have looked through the javascript fiddle, stackoverflow, w3schools, and several other resources, I've found some examples which do something akin to what I am trying to do, but I have not been able to successfully repurpose the examples.
<!DOCTYPE html>
<html>
<body>
<link src="cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
<script>
$(document).ready(function(){
$('#taken').on('click',function(){
$('.taken').toggle();
});
});
</script>
<input type = "button" name = "all" id="all" value = "all" >
<input type = "button" name = "taken" id="taken" value = "taken" >
<input type = "button" name = "open" id="open" value = "open" >
<table style="width:100%" id="testing">
<tr class="all taken">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="all open">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="all open">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr class="all taken">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
So let's skip the the table headers to my table body. I have a populated table:
HTML:
<tbody>
<tr *ngFor="let e of emails; let i = index">
<td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
<td id="subject-{{i}}">{{e.sender}}</td>
<td id="subject-{{i}}">{{e.subject}}</td>
<td id="subject-{{i}}">{{e.date}}</td>
</tbody>
I want the table whole row to display a CSS class when the user checks the checkbox. And then the color should go back to normal when the user deselects. Just UI stuff to show the user that an email has been selected. I currently have an empty CSS and .ts file.
The way you have done it here is more involved because presumably you have some logic inside addToSelectedList event that will add/remove the email depending on the checked state. The easiest way is to add a property on the email entity isSelected, and do this:
<input ... [checked]="e.isSelected" >
On your tr add the ngclass binding as suggested by others as follows:
<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...
Other observation in your code there isn't a closing tr that should be wrapping around all the tds.
Not an Angular expert, but you can achieve just that using a JS onchange event bound to your checkbox:
$(".box").on("change", function() {
$(this).parents("tr").toggleClass("highlight");
});
.highlight {
background-color: #ffff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Label 1</td>
<td><input type="checkbox" class="box"/></td>
</tr>
<tr>
<td>Label 2</td>
<td><input type="checkbox" class="box"/></td>
</tr>
</table>
I currently utilized this method Linethrough/strikethrough a whole HTML table row and it works great.
However how do I attach it to a HTML check box onclick method?
http://jsfiddle.net/deaconf19/DrEhv/
<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/>Checkbox</td>
<td contenteditable/>3</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating again</td>
<td contenteditable/>02/07/2014</td>
</tr>
<tr class="strikeout">
<td contenteditable/>Checkbox</td>
<td contenteditable/>1</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating</td>
<td contenteditable/>02/07/2014</td>
</tr>
</table>
You can use jQuery, to find check box parents parent and add a class to it when status of checkbox changed
if ( this.checked) {
$(this).parent().parent().addClass("strikeout");
} else {
$(this).parent().parent().removeClass("strikeout");
}
Example
Just use javascript to change the table class. If using jQuery:
$('#myCheckbox').change(function(){
$('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})
The text below assumes that you have a checkbox with id="myCheckbox" and a table row with id="myTableRow".
Why use jQuery if pure JS can do the same thing:
In your HTML, add onclick handler for checkboxes:
<input type="checkbox" onclick="strike(this)">
Then change class of TR element based on checkbox value, like this:
function strike(elm) {
if(elm.checked) {
elm.parentNode.parentNode.className = "strikeout";
} else {
elm.parentNode.parentNode.className = "";
}
}
As simple as that !
I have got the following HTML table...
<table>
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laura</td>
<td><input type="hidden" value="1">Info</td>
</tr>
<tr>
<td>2</td>
<td>Sabrina</td>
<td><input type="hidden" value="2">Info</td>
</tr>
</tbody>
</table>
How can I get with jQuery the value of the hidden input field, when the link is clicked?
$(".info").click(function() {
// Here I need to find out the value...
});
Here's how you do it :
$(".info").click(function(e) {
//just in case, will be useful if your href is anything other than #
e.preventDefault();
alert($(this).prev('input[type="hidden"]').val());
});
prev method will search for the previous element, which is where your input[hidden] is.
And its href, not hre, in the <a/> tags.
You can also use attributes <a href="#" data-hidden="1" class="info"> don't need use hidden fields
$(".info").click(function(e) {
e.preventDefault();
alert($(this).data('hidden')); // or $(this).attr('data-hidden');
});
I have a page with three rows of main information that all have a 'More Info' button attached, sort of like wefollow.com and their info button.
When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.
The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.
I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.
Any help would be awesome. Thanks.
Scripts
index
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
listing.js
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
combined with:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
Not sure why you need to hide siblings in the above though.
Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:
div.more-information { display: none; }
You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi. Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.