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>

Can't manage to target an element in jQuery

I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.
However, I can't manage to track it and I've been putting way too much time on this simple problem.
Here's my html :
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
And my jQuery:
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
alert(clipboard);
});
});
I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.
Also, how would you get the "Some text" part?
Thanks for your time.

value is not a valid property for td or anything else but input. You had to use data-value to be correct.
HTML:
<table>
<tr>
<td title="td_title_1" data-value="td_value_1">Some textElement_1</td>
<td title="td_title_2" data-value="td_value_2">Some other textElement_2</td>
</tr>
</table>
JS:
$(function(){
$(document).on('click','a[title="Copy"]', function(){
var clipboard = $(this).parent().data('value');
alert(clipboard);
});
});
* (star selector) is a tricky selector. Do not use it in every purpose.

The first thing is you need to use stopPropagation() so that it works only for the element you desire and the next thing is you can use the simple way to clone the element so that you get only the text part of <td> element that is the immediate parent of the clicked element.
$(function() {
$("*").on('click', 'a[title="Copy"]', function(e) {
var clipboard = $(this).parent('td')
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>

Simply use $(this).parent().attr('value');
$(function(){
$(document).on('click','a[title="Copy"]',function(e){
var clipboard = $(this).parent().attr('value');
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>

$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').filter('[title="td_title1"]').attr('value');
alert(clipboard);
});
});
You should try with filter. Find function is for finding children, your intent is to filter the tds based on the criteria, and also change the val to .attr('value'), since .val is only for inputs only, but to read any attribute use attr

try
alert($(this).parent('td').attr('value'));

I see a attribute in dom <td> element, but unable to retrieve that in jQuery

I am trying to get the value width="25%" from <td valign="top" width="25%">, I am starting from a descendant location way below the <td>. Possibly there might be more <td> elements between my target <td valign="top" width="25%">. But I simply cannot get 25%from the below.
I have tried:
var prts = jQuery('.someClassWayBelow').parents('td');
jQuery.each (prts, function () { var css = prts.width(); console.log(css)});
jQuery.each (prts, function () { var css = prts.attr("width"); console.log(css)})
I get 664px or 664 or undefined, how do I get a return of 25%?
Appreciate in advance.

$(document).ready(function(){console.log($("div").attr('width')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div width="25%"> </div>

Once I made the element under consideration to jQuery object using $ (this), I was able to access methods like attr()

How to get the ID of the element that my tag <img> is in?

I would like to get the ID of
<table id="table">
<th>Name</th>
<tr><td id="td1"><img id="img1"onload="getData(this)" aref and so on></td></tr>`
</table>
I need to get that ID.. For my function getData(this)
alert($(this).parent().attr('ID'));
alert(($(this).closest("TD").find('ID')));
alert($idd.closest('td').attr('id'));
alert($(this).parent().attr("id"));
Tried this ones but no succses get undefined in alert.
I need to make the function dynamic so it can take any element.
instead of this
document.getElementById('td1').innerHTML = data;
document.getElementById('td2').innerHTML = data;
i want to pass a variable to the
document.getElementById(VAR).innerHTML = data
data is a ajax call.
IT dosent matter if its done with JSor jquery :) thx

Use JSFiddle, It's pretty !
You have two errors :
$.ready not need to be use in function
You use getApi(this), but you need to use getApi($(this))
You must do that :
function getApi(idd) {
$.ajax({
.....
});
}
http://jsfiddle.net/vryymy8p/24/

You can use :
$(this).attr('id'); // img1
$(this).parent('td').attr('id'); // td1
$(this).parent('td').parent('tr').parent('table').attr('id'); // table
I hope it's your question because I'm french...

I thinks your html is wrong :
http://jsfiddle.net/vryymy8p/2/
<table id="table">
<tr>
<th>Name</th>
</tr>
<tr>
<td id="td1">
<img id="img1" src="http://jsfiddle.net/img/logo.png" style="background:#000" />
</td>
</tr>
</table>

Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?

I am trying to build up a table by adding values from textbox fields in the tfoot of the same table. The eventual goal is to be able to then inline edit previously added rows while still leaving the capability to add more rows.
I have the following markup:
<table>
<thead>
<tr>
<th>Service</th>
<th>Protocol</th>
<th>Source Port</th>
<th>Destination Port</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<input type="text" data-function="service" value="foo" />
</td>
<td>
<input type="text" data-function="protocol" value="bar" />
</td>
<td>
<input type="text" data-function="sourcePort" value="baz" />
</td>
<td>
<input type="text" data-function="destPort" value="fob" />
</td>
<td>
<button id="addBtn" type="button">Add</button>
</td>
</tr>
</tfoot>
</table>
The below script stores all of the input[type=text] elements in the tfoot in an inputs variable. From there I am trying to use .index() to identify and then retrieve the value of each textbox:
$(document).ready(function () {
$('#addBtn').click(function (e) {
var inputs = $(this).closest('tfoot').find('input[type=text]');
console.log(inputs);
var serviceIndex = inputs.index('[data-function="service"]');
console.log(serviceIndex);
console.log(inputs[serviceIndex].value);
// the remaining indexes all return -1
var protocolIndex = inputs.index('[data-function="protocol"]');
console.log(protocolIndex);
console.log(inputs[protocolIndex].value);
var sourcePortIndex = inputs.index('[data-function="sourcePort"]');
console.log(sourcePortIndex);
console.log(inputs[sourcePortIndex].value);
var destPortIndex = inputs.index('[data-function="destPort"]');
console.log(destPortIndex);
console.log(inputs[destPortIndex].value);
});
});
Unfortunately the selector data-function="X" selector only works for service. All of the other selectors return -1 indicating that a value was not found. The above code is from this jsFiddle which illustrates the problem. I am not wedded to using index, but cannot use the element's id as I need a more general solution.
Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?

From the docs:
If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.
So this should work:
inputs.index($('[data-function="protocol"]'));
...
Demo: http://jsfiddle.net/Dfxy9/2/

In the context you are using it .index is only called on the first element in the jQuery collection. jQuery does this for any non-iterative method (for example .html, .attr, .text) -- .index is no different.
Instead of using the collection, use the selector: http://jsfiddle.net/4kLqb/