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.
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 a table which has multiple rows and a link on the end.
I want to click on the link in the row which has the text I'm looking for. Example:
<table class="repeater large">
<tbody>
<tr>
<td headers="Cardholder ID" nowrap="nowrap">1234</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Closed</td>
<td headers="Card Last Four">1234</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
<tr class="alternaterow">
<td headers="Cardholder ID" nowrap="nowrap">5555</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Active</td>
<td headers="Card Last Four">555</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
</tbody>
</table>
I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.
I've tried breaking down the table into a array and getting the specific child number.
I was trying to create a way to get to that specific link in the table.
function getLinks() {
var links = document.querySelectorAll('#page > table');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('id');
});
}
I simple need to get that link on the row of my choice.
You could iterate over the table rows then get the id from the first element.
If the text equals the ID you are looking for then get the last element and click();
var rows = document.querySelectorAll('table tbody tr');
[].forEach.call(rows, function(tr) {
var td = tr.querySelector('td:first-child');
if (td.innerText === '5555')
tr.querySelector('td:last-child').click();
});
See the fiddle here
I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks
Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");
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.
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.