I have created an HTML Table. I need to display this table only when a button is clicked. Could some one suggest how to achieve this?
Regards
Giri
You can use jquery and attached an handler.
for example
in html:
<a class="button-link" href="javascript:void(0);">link</a>
<table class='hidden-table'>
<tr>
<th>id</th><th>name</th>
</tr>
<tr>
<td>1</td><td>Mr Awesome</td>
</tr>
</table>
in css:
.hidden-table{
display:none;
}
in js/jquery
$('.button-link').on('click',function(){
$('.hidden-table').show()
})
use the css to hide the table first and then upon clicking on the link it will show the table.
You could use Jquery, from here http://jquery.com/download/ .
After installing, you could use the following syntax:
$('#idofthebutton').click(function(){
$('#idofthetable').toggle();
});
Related
Is there a way to bring headers in the column and on click of the header, the attributes associated with the header in a different column using Dojo?
Thanks
Kumar
you can use the event onHeaderCellClick
onHeaderCellClick: function()
{
console.log("do what you want");
}
to add the header, you can do it easily in declarative way like this:
<table data-dojo-type="dojox.grid.DataGrid">
<thead>
<tr>
<th field="fieldName" width="200px">Column Header</th>
</tr>
</thead>
</table>
If you are using declarative way you can use the attribute onHeaderCellClick to your table, onHeaderCellClick="func" call function func().
I am using the "Survey Link" template to create a project on Mechanical Turk.
I am running an A/B test. I would like to direct 50% of workers to one link, and 50% to another link.
How do I do this?
From the "Design Layout" page, click on "Source". This will let you edit the html/javascript/css for the survey.
You'll find a <table> element with a <tbody> element. Change the <tbody> element to this:
<tbody>
<tr class="survey-one">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-1">http://link-to-survey-1</a></td>
</tr>
<tr class="survey-two">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-2">http://link-to-survey-2</a></td>
</tr>
</tbody>
This simply adds another row to the table for the link for your second survey. Note the link-to-survey-1 and link-to-survey-2 that you'll need to replace with your own links.
A bit lower in the file, you'll see the <style> element. Add this to it:
.survey-hidden {
display: none;
}
And a bit lower, you'll see a <script> element. At the bottom of it, right before the });, add the following javascript:
var surveyToHide = (Math.random() >= 0.5) ? '.survey-one' : '.survey-two';
$(surveyToHide).addClass('survey-hidden');
This randomly picks one of your suveys, and makes it hidden, so that the worker sees only one.
I am trying to automate an application using selenium Webdriver. I frequently come across scenarios where click action does not work on the WebElements.
For instance , in the html block that looked something like :
<div id=staticid>
<table>
<tbody>
<tr id="tr1" class="class1" tabindex="-1" data-recordindex="0" data-recordid="1" data-boundview="gridview-1211" role="row">
<td id="td1" class="class2 " role="gridcell">
<div class="class3 " style="text-align:left;" unselectable="on">Content 1</div>
<td id="td2" class="class6" role="gridcell">
<div class="class5" style="text-align:center;" unselectable="on">
<img class="class4" src="chekboximage">
</div>
</td>
<td id="td3" class="class8" role="gridcell">
<div class="class5" style="text-align:center;" unselectable="on">
<img class="class4" src="checkboximage">
</div>
</td>
</tr>
</tbody>
</table>
</div>
The ids are dynamically generated and the classes are like "grid-inner.." so on. (I ve replaced them to make it smaller)
The last two elements appear as checkboxes.
On clicking the block, the class of the td block changes and the the checkbox appears to be clicked.
I tried to click on the checkboxes using driver.findElement(By.xpath()),csspath and everything. The click action seems to be carried out successfully but the desired result,that is ,the checkbox being checked does not happen.
I verified my xpath and csspaths using Selenium IDE. The Element gets located correctly using the "Find" option. Click action also gets performed ,but the checkboxes remain unchecked.
I ve been trying to get this done for almost a week now.
Can anyone please help me out?
The code did seem to change the image on click (I compared the image source before and after a click) . But there were no visible "onclick()" calls (I am not sure if there are other ways of invoking java script fuctions on click.Please do let me know if there are ). Anyway , I tried clicking on the block. it works with Se-IDE and Se-IEDriver but not in FireFoxDriver.
Try driver.findElement(By.xpath()).sendKeys(Keys.ENTER); this also does the same as click but with keyboard stroke. Hope it works.
I need to apply a different class to a <tr> according to the $index of the repeat directive. For example
<table>
<tr ng-repeat="model in list" class="xxx">
<td>...</td>
<tr>
</table>
I need to apply a different style to <tr> depending on whether the index is even and odd.
How could I solve this?
Normally you would use ngClassOdd (http://docs.angularjs.org/api/ng.directive:ngClassOdd) and ngClassEven (http://docs.angularjs.org/api/ng.directive:ngClassEven) directives like this:
<tr ng-repeat="item in items" ng-class-odd="'class1'" ng-class-even="'class2'">
Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/
Unfortunately there is an issue where the mentioned directives are not working correctly when rows are removed: https://github.com/angular/angular.js/issues/1076
As a work around you can use the ngClass directive (http://docs.angularjs.org/api/ng.directive:ngClass) with the $index variable exposed by a repeater:
<tr ng-repeat="item in items" ng-class="{class1 : $index%2==0, class2 : !($index%2==0)}">
Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/am7xs/
It is not super-clean, but could be improved (for example, by exposing a function in a root scope, something like:
ng-class="getClass($index,'class1','class2')"
till the mentioned bug is fixed
If this is just for styling you can just use CSS
tr:nth-child(odd) { ... }
tr:nth-child(even) {...}
see http://jsfiddle.net/5MSDC/ for an example
I am trying to replace a table with my own table using grease monkey. The page that has the table has 2 tables with the same class and no IDs.
I need to replace only the second table (with my own table) and do nothing to the first table. There is nothing that really makes the second table unique from the first table, so the only thing I can think of is trying to add a DIV around the second table, but cant figure it out.
Any ideas? Heres the page code:
<h3>Table 1</h3>
<table class="details" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr>
</tbody></table>
<h3>Table 2</h3>
<table class="details" border="1">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr><tr>
<th>3</th>
<td>4</td>
</tr>
</tbody></table>
You can use xpath to find the second tables, and do something with it. The xpath expression would be (//table[#class="details"])[2]. Below I added an example which uses (//pre)[1] instead, this will find the first code block on this page, I will hide it as an example. So this hides the page code from your question. (//pre)[2] will hide my script.
See Also here for a tutorial how to use xpath.
// ==UserScript==
// #name so-test
// #namespace test
// #include http://stackoverflow.com/questions/4635696/use-greasemonkey-to-remove-table
// ==/UserScript==
// find first <pre> on this page
var xpathResult = document.evaluate('(//pre)[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node=xpathResult.singleNodeValue;
// now hide it :)
node.style.display='none';