So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4
I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">
I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table
Related
I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
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 working on a simple project to learn web development and I would like to add a feature in my project that highlights the clicked cell to a specific colour. Please have a look at this link: https://jsfiddle.net/pz6tc3ae/30/
What this project does is, when any cell from table 1 is clicked it triggers table 2, however, currently there is no way of knowing which table cell triggered table 2, so I am thinking of adding a feature that highlights the clicked cell, however, when the user clicks away from the highlighted cell, the cell should change colour to the one it was in before being highlighted, and not to the default colour.
Please note, try the link above in chrome, some features does not work other browsers.
HTML
<title>Untitled Document</title>
<body>
<table width="300" border="1" id="table1">
<tbody>
<tr>
<td id="cell1"> On-Menu</td>
<td id="cell2"> On-Menu</td>
<td id="cell3"> On-Menu</td>
<td id="cell4"> On-Menu</td>
</tr>
<tr>
<td id="cell5"> On-Menu</td>
<td id="cell6"> On-Menu</td>
<td id="cell7"> On-Menu</td>
<td id="cell8"> On-Menu</td>
</tr>
<tr>
<td id="cell9"> On-Menu</td>
<td id="cell10"> On-Menu</td>
<td id="cell11"> On-Menu</td>
<td id="cell12"> On-Menu</td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="menulist">
<tbody>
<tr>
<td id="cellorange"> Orange</td>
</tr>
<tr>
<td id="cellapple"> Apple</td>
</tr>
<tr>
<td id="cellbanana"> Banana</td>
</tr>
</tbody>
</table>
</body>
If my question was not clear, please let me know and I will try explaining it better :)
try this:
https://jsfiddle.net/pz6tc3ae/35/
just add to javascript:
actionCell.className = (actionCell.className === "green") ? "none" : "green";
and to CSS:
.green{background:green;}
This is the demo with jquery:
https://jsfiddle.net/pz6tc3ae/37/
first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.
here is what my generated table looks like:
<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>
<tr>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>
next:
I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like:
<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader">header1</td>
<td class="gheader">header2</td>
..and so on
</tr>
<tr>
now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:
<tr>
<td>label(id)</td>
<td>checkbox(id)</td>
<tr>
in between each headers which was newly moved
possible table output would look like:
<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""> </td>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>
other notes:
colspan 2 (on gheader) is auto generated
Try
var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()
Demo: Fiddle
Have some text that needs to be replaced, searched around this website for all results with similar titles and no luck.
Currently the text is Handling Fee: and I need it to say Shipping Insurance: - Please Help!
Here's the html output of the page;
<div class="c3 right">
<h2>Order Summary</h2>
<table class="styledtable">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">1</td>
<td><strong>ACT Clutch Kit - Heavy Duty (HD) (DC1-HDSS)</strong>
<div class="order_item_notes">HD Clutch Kit<br/> Performance Street Disc (SS)</div>
<div class="order_item_specs">
Components : D018, 3001532, ATCP23<br/>
</div>
</td>
<td style="text-align:right">$314.25</td>
<td style="text-align:right">$314.25</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Items Total</td>
<td style="text-align:right">$<span id="itemstotal">314.25</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Shipping:</td>
<td style="text-align:right">$<span id="shippingtotal">TBD</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Handling Fee:</td>
<td style="text-align:right">$<span id="handlingfee">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Tax:</td>
<td style="text-align:right">$<span id="taxtotal">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Order Total:</td>
<td style="text-align:right">$<span id="total">0.00</span></td>
</tr>
</tbody>
</table>
<p>Upon checkout, you <strong>must enter</strong> your cars <strong>year, make and model</strong> into the comments section at the bottom of this page. <strong> We will not complete your order if we do not have this information!</strong></p>
<p> </p>
</div>
</div>
You can use a jQuery :contains selector:
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
You can see it in action here: http://jsfiddle.net/cnhYj/
Update
in order to get it to work after the document is ready you can write it like that:
$(function() {
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
});
$("td:contains('Handling Fee:').text('Shipping Insurance');
I don't see any javascript there just html
you want to turn this..
<td colspan="3" style="text-align:right">Handling Fee:</td>
into this...
<td colspan="3" style="text-align:right">Shipping Insurance:</td>