I have the two divs, One for questions another one for answers. if the div id ques0 has here class <div id="ques0" class="showquestion here"></div>, respect to answers id qstats0 of parent tr added class of highlight.
HTML
<!--Question-->
<div id="ques0" class="showquestion here"></div>
<div id="ques1" class="hidequestion"></div>
<div id="ques2" class="hidequestion">
<!--Answer-->
<tr>
<td valign="top">1</td>
<td valign="top" id="qstatschoice0">A</td>
<td id="qstats0">N</td>
</tr>
<tr>
<td valign="top">2</td>
<td valign="top" id="qstatschoice1">A</td>
<td id="qstats1">N</td>
</tr>
<tr>
<td valign="top">3</td>
<td valign="top" id="qstatschoice2">A</td>
<td id="qstats2">N</td>
</tr>
I want output like below.
<!--answer-->
<tr class="highlight">
<td valign="top">1</td>
<td valign="top" id="qstatschoice0">A</td>
<td id="qstats0">N</td>
</tr>
The ids are not the same(and it should not be), but there is a relationship ie the numeric part of the ids are the same so you can use replace() to find out the td with id qstats<x>(where x is the numeric part of the id of the here element) then find the tr ancestor of it and highlight it.
function highlight() {
var $c = $('.showquestion'),
//get the id of here element
id = $c.attr('id');
//find the tr to highlight
$('#' + id.replace('ques', 'qstats')).closest('tr').addClass('highlight')
}
Demo: Fiddle
I don't know where you use jQuery..
document.getElementById('current_question')
$("#current_question") // jquery way ;-)
try smthg
$("#an_id").addClass("blabla");
$("#an_id").removeClass("blabla");
btw, if many div's have the same ID, i think only the last one in the DOM will match.
First: document.getElementById is clean javascript, not jquery.
Second: try something like this:
var question = $('#ques0').text();
var answer = $('#qstats0').text();
if (question == answer) {
answer.parent('tr').addClass('highlight');
}
Some info: ids have no value. It's just identificator of an element. .text() gets all text inside selected element.
Tell me if I understood something wrong and if so - please provide more information.
Best regards.
Related
I have a table set up like this:
<tr class="rgRow" id="someID" style="color:Red;">
<td>
<input id="SelectCheckBox" type="checkbox" name="SelectColumnSelectCheckBox">
</td>
<td style="white-space:nowrap;display:none;">1896730</td>
<td style="white-space:nowrap;display:none;">171748</td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;">Onboard</td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;"> </td>
<td style="white-space:nowrap;">
<input id="SomeValueWorkCompleted" type="checkbox" name="SomeValueWorkCompleted" checked="checked">
</td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;display:none;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;display:none;">12345678.87599587</td>
<td style="white-space:nowrap;display:none;">987654.04205552</td>
</tr>
and jQuery code to grab some value from another td in the table (FR-12345 in this example which does exists twice in the table). The value I need to get is 5 td up and 4 td down. Currently we are using the following jQuery to grab the needed value when the SomeValueWorkCompleted checkbox is checked:
$('input[id$=WorkCompleted][type=checkbox]').change(function() {
if($(this).prop("checked") == true){
var test = $(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]
console.log(test.innerText)
}
else if($(this).prop("checked") == false){
}
});
Is there a better way than using
$(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]
to grab the value of the td?
If you know the "index" of the td you'll need the data from (ie. it will always be the 5th td in the table), you can use:
const tds = document.getElementById("tableIdGoesHere").querySelectorAll("td");
...to generate an array of all tds, then if the td is always the 5th in the table:
console.log(tds[4].innerText)
...should be the value you're looking for.
EDIT: Sorry: tds[4].innerText Haven't had coffee yet. ;)
If you are using jQuery, you can use the :nth-child selector (more info here)
Since your checkbox is inside a specific row, you can move your selector to that row and then use the child selector, like this:
// If the 5th child
$(this).parent("td :nth-child(5)")
You can use index() and eq() of jQuery to get the values as follows:
$("#SomeValueWorkCompleted").change(function() {
var parentTD = $(this).closest("td");
var index = $("#someID td").index(parentTD);
value = $("#someID td")
.eq(index - 5)
.text();
console.log(value);
});
I have the following JS/jQuery which grabs the cell value of an ASP DetailsView control (rendered HTML), checks it for a condition, and hides a div based on said condition. It is basically checking to see if the cell value is formatted like an IP address or not...
$(document).ready(function () {
//Grab innerHTML in the IPAddress cell from DetailsView1
//See if it contains the characters: 10.
//If it does not contain '10.', hide the parent div for that user
var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;
var addrFormat = ip.includes("10.");
if (addrFormat == false) {
$("#IDofDetailsView1ParentDiv").hide();
}
});
This works well, but I need to check several DetailsView controls, and potentially .hide() several elements by ID.
In JS/jQuery, is there a way to:
ForEach rendered HTML element like DetailsView, check format condition, then hide parent div for this control only, if condition is false
Thank you for any advice.
EDITED TO SHOW MARKUP
Here is the rendered HTML I am working with...
<div class="square" id="myId">
<div class="content">
<div><p id="myId2">Unavailable for Dispatch</p>
<div class="table">
<div class="table-cell">
<div id="UpdatePanel1">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" id="DetailsView1" style="border-collapse:collapse;">
<tr align="center">
<td colspan="2" style="border-style:None;">Text1</td>
</tr><tr align="center">
<td class="building" colspan="2" style="border-style:None;">Text2</td>
</tr><tr align="center">
<td colspan="2" style="border-style:None;">Text3</td>
</tr><tr align="center">
<td class="hide" colspan="2" style="border-style:None;">Text4</td>
</tr><tr align="center">
<td class="hide" colspan="2">Text5</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I have several of these on my page. Right now I am using:
var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;
But I will probably need to use a class selector on "Grid" to process them all at once, correct?
Then I need to hide the very highest div by id, not the closest parent. But ONLY hide those divs whose td 'Text 4' value is false. I am not sure how to grab the innerHTML I am currently getting from "DetailsView1", if I use the Grid class instead.
Thank you again...
Uses for each and then use 'this' to target individual elements.
EDIT: Had to edit this and removed includes() as it does not work in very many browsers. Now I am converting the HTML of all .Grid elements toString() and then I use indexOf() on that string to determine if it contains 10.
New working fiddle:
https://jsfiddle.net/Lh5kenge/
Updated Code:
$(function(){
$('.Grid').each(function(){
var string = $(this).html().toString()
console.log(string)
if (string.indexOf("10.") > -1) {
$(this).closest('.square').hide()
}
})
})
There are more than one TR TD, same class name given in a table used for formatting without ID given.
I would like to seek help for jQuery. How can I retrieve / replace <td> content in the span id = payment_currency_text, class="formdata element?
1) To set a variable, store as SGD, getting from second set of TR TD.
2) Replace SGD to EUR.
Note : The system used Jquery version = v1.4.2
I tr to used below syntax but no luck :
alert(jQuery("#payment_currency_text tr.find(.formdata)").val());
alert(jQuery("#payment_currency_text").next('.formdata').val());
alert(jQuery("#payment_currency_text tr td.formdata").val());
alert(jQuery("#payment_currency_text").find(".formdata").html());
... (tr td child)
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<span id ="payment_currency_text"> <!--- There is a SPAN tag, with ID given --->
<tr>
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD <!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</span>
to target td.formdata inside span.Try this:
To get:
var currency=$('#payment_currency_text .formdata').html();//currency will be SGD here
To set:
$('#payment_currency_text .formdata').html('EUR');
If you know that its always going to be a specific child you can use the :nth-child() selector.
var setter = $("tr:nth-child(2) td:nth-child(2)").text();
$("tr:nth-child(2) td:nth-child(2)").text("EUR");
alert(setter)
Here is a fiddle http://jsfiddle.net/87V9v/
In jQuery you can replace the inner HTML of an element like so
$('.class-name').html("Some html in here");
However, be careful because this will replace the HTML for all classes of this name.
You can use text() to get the data (plain text) as well as replace existing data with new one. If your replacement is HTML, you can use html()
var data=$('td.formdata').text();
alert("The value is"+data);
$('td.formdata').text("New Data");
You can use:
$("#payment_currency_text").text("your text");
or
$("#payment_currency_text").html("your<b>text</b>");
If you just want to change the html inside the td, use like this
$(".formdata").html("some text or tags here");
If you want to get the text inside those td, use like this
$(".formdata").each(function(){
$(this).html();
});
Edit
$("#payment_currency_text").find(".formdata").html()
$("#payment_currency_text").find(".formdata").html("some text or tags here");
Your html structure has some problem, you cant enclose tr inside span. tr should be the child of table. So change your html accordingly.
<table>
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<tr id="payment_currency_text">
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD
<!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</table>
Then you can use the above code for getting the elements and values.
<table>
<tr>
<td class="ok" data-test="12-12 00">xxx</td>
<td class="ok" data-test="13-12 00">xxx</td>
<td class="ok" data-test="14-12 00">xxx</td>
<td class="ok" data-test="15-12 00">xxx</td>
</tr>
</table>
I would like get the <td> where data-test = "14-12 00". Here’s my code:
alert($('td .ok[data-test="14-12 00"]').text());
Why is this not working?
http://jsfiddle.net/LqD5h/
Try:
alert($('td.ok[data-test="14-12 00"]').text());
(Notice there is no space between td and .ok).
You were originally trying to select all elements with classname ok that are descendants of a td and bear a certain data-test value.
How about another way to skin this cat?
alert($('tr .ok[data-test="14-12 00"]').text());
Notice, td changed to tr. :-)
I have the following HTML
<tbody class="t_bdy">
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
</tbody>
I need to insert new <tr> when I click on button with .crm_insert class.
When .crm_insertis clicked, it need to insert a new row at the current location. All
other rows will move down. For example, if insert against row 3 is clicked then
row 3 will be new row inserted and current row 3 etc will move down to become
row 4 etc.
How can I achieve this ?
All answers are good, but I can only accept one : Thanks all
I'd try something like this using closest() and before()
$('a.crm_insert')
.click(function()
{$(this).closest('tr.Quotation_List_td').before(htmlcodeofyounewTRhere);}
)
Hope this will help
Assuming:
Your new row is in the same structure as your current row
You want the new row to also have the 'Insert' functionality
You want a click event handler which does something to this effect:
$('.crm_insert', '#table').on('click', function() {
var currentRow = $(this).closest('tr');
currentRow.clone(true).insertBefore(currentRow);
});
Where #table is the id of your table.
Here's a simple example
If you are inserting something completely different, then you do not need to use on() or clone(), and the code becomes simpler:
$('.crm_insert').click(function() {
var currentRow = $(this).closest('tr');
$('<tr />').insertBefore(currentRow);
});
Where <tr /> would be whatever you are trying to insert.
This might work for you. It'll find the parent tr of the button you just clicked, clone it (including the onClick functionality of the button) and insert that before the parent tr. This will result in a new row containing the same information as the target row though. Depending on what results you want to show in the new row, you might want to alter the code to clear out any copied values too.
$(".crm_insert").live("click", function(){
var tr = $(this).parents("tr.Quotation_List_td");
tr.clone().insertBefore(tr);
});
You can try this
$('.crm_insert').live('click', function(){
var self = $(this);
self.parents('tr.Quotation_List_td').before('add your row here');
});
The latest versions of jquery employ on instead of live.