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.
Related
I need to change all ID after cloning node below by javascript or jquery.
<table id="1">
<tr>
<td id="RM_1"><button type="button" onclick="duplicateFunction(1)"></td>
<td id="CL_1"><input id="[1][999]"/></td>
</tr>
</table>
when I clone node with ID = "1" I need to change 1 to 2 as in all ID tags below.
<table id="2">
<tr>
<td id="RM_2"><button type="button" onclick="duplicateFunction(2)"></td>
<td id="CL_2"><input id="[2][999]"/></td>
</tr>
</table>
Remark : The table id is unique id. I use simple number to explain the code.
update
When user click duplicate button. The duplicateFunction will be called.
now , I can change table id but I can't change inside.
function duplicateFunction(table_id){
var myTable = document.getElementById(table_id);
myClone = myTable.cloneNode(true);
var newTableID = Date.now();
myClone.id = newTableID;
document.getElementById("AddingSpace").appendChild(myClone);
}
because every tags have another features to do when user click.
that's the best way on this time.
Thank you in advance
This is an attempt along the lines suggested by Rory McCrossan. Instead of the individual ids of your elements inside the table I used shortened class names. The tables do not have actual ids but dataset attributes with id properties. This way it will not cause serious problems if ids should become double ...
My function calculates a newid on the basis of the number of already existing tables in the #addingspace div. This is not production ready either but probably less problematic than your original approach.
const $trg=$('#addingspace');
$(document).on('click','.RM button',function(){
let newid=$trg.find('table').length+2;
$trg.append(
$(this).closest('table').clone().data('id',newid) // set data-id
.find('.CL span').text(newid).end() // set span and return cloned element
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-id="1">
<tr>
<td class="RM"><button type="button">duplicate</button></td>
<td class="CL"><input /> id: <span>1</span></td>
</tr>
</table>
<div id="addingspace"></div>
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 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.
<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.