We Keep Coding

Replace ID for all tag after cloning node by javascript

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>

How to get text of next td in jQuery?

I need Test 2 text when I clicked on "Click". I have tried like this ...
$("#clicked").click(function(){
alert( $('this').closest('td').next('td').next('td').text());
})
But In alert there is empty. How I can get Test 2 ?
<tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
From comment below:
this means $('#clicked'). That means when I clicked on the Click link.

you need to use parent instead of closest :
$("#clicked").click(function(){
text = $(this).parent().next('td').next('td').text();
alert(text);
})
https://jsfiddle.net/g6gnog4h/

$('#clicked').click(function(){
console.log($(this).closest('td').next().text());
});

Try this one, as you need to go parent tr and than find the 4th td with the ID of a tag to get the text.
<table><tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
</table>
<script>
$('#clicked').click(function(){
alert($(this).parents('tr').children().find('#clicked2').text());
});
</script>

You may try like this:
$('#clicked').click(function(){
var val=$(this).siblings().text();
alert(val);
});
siblings() method returns all sibling elements of the selected element.

onclick is set for <tr> How to disable for one <td>

Suppose onclick handler is set for a <tr> is it possible to disable/overwrite it for one particular <td>?
<tr onclick='somefunction()'>
<td> </td> <!--onclick should work here-->
...
<td> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
Of course I can set it for each <td> separately or pass the name of a td to the function and decide what to do based on this name, but it seems like there should be a simpler solution.

I found the easiest was to stop the event being passed to the parent html using onclick=event.stopPropagation() in the <td> tag.
So <td class=whatever onclick=event.stopPropagation()>cell data<td>

In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:
function somefunction (e) {
if (e.target.cellIndex === 1) {return;}
/* Do something, the td is clickable */
}
To get this work with an inline handler, you've to pass the event object:
<tr onclick='somefunction(event)'>
A live demo at jsFiddle.
Things will get a bit more complex, if you've elements within cells. In that case you have to find a td parent element, like so:
function somefunction (e) {
var target = e.target; // Cache the target element
while (target) { // Iterate through elements
if (target.tagName === 'TD') { // TD found, stop iteration
break;
}
target = target.parentElement; // Set target as a parent element of the current element
}
if (target === null) {return;} // Check that we really have a TD
if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
:
}
A live demo at jsFiddle.
Edit 2018
In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.
A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn't work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.
A live demo at jsFiddle.

EDIT:-
Try something like this.
HTML:
<tr id="row">
<td> </td> <!--onclick should work here-->
...
<td class="noChange"> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
JavaScript:
window.onload = function() {
var row = document.getElementById("row");
for (i=0; i<row.childNodes.length; i++) {
if (row.childNodes[i].class != "noChange") {
row.childNodes[i].onclick="doStuff()";
}
}
}

<html>
<body>
<table border="1">
<tr onclick='somefunction(this)'>
<td><input type="text"></td> <!--onclick should work here--> ...
<td><input type="text"></td> <!--onclick should not work here--> ...
<td><input type="text"></td> <!--onclick should work here-->
</tr>
</table>
<script>
function somefunction(element) {
var td = element.children;
console.log(td);
var inputObj = td[1].children;
console.log(inputObj[0]);
inputObj[0].disabled = true;
}
</script>
</body>
</html>
The children property 'element.children' returns a list of an element's child elements, as an HTMLCollection object.
enjoy :)

Jquery how to retrieve / replace value in <span> <tr> <td> value?

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.

How to find the parent element using javascript

I want to change the background color of the table cell when radio button inside the cell is clicked.
<table>
<tr>
<td align="center">
<input type="radio" value="foo"
onclick="this.parentElement.style.background-color='red';" />
</td>
</tr>
</table>
How to get the parent element reference?

Using plain javascript:
element.parentNode
In jQuery:
element.parent()

Use the change event of the select:
$('#my_select').change(function()
{
$(this).parents('td').css('background', '#000000');
});