We Keep Coding

Clone a <tr> and modify the clone's content in JavaScript / jQuery

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");

How To Grab Data In Any Table Row (HTML/JavaScript) Using Tree Traversal Methods

I have a table that looks like this -->
<table>
<tr style="display: none";><td class="index">index_value</td></tr>
<tr><td>section header</td></tr>
<tr>
<td class="name>Steven</td>
<td class="height">6 ft.</td>
<td><button class="add">Add</button></td>
</tr>
</table
and a js script that looks like this -->
<script>
$(".add").on('click', function(){
var the_name = $(this).closest("td").siblings(".name").text();
var the_type = $(this).closest("td").siblings(".type").text();
var the_index = $(this).parent().find("td.index").text();
}
</script>
As you can probably tell, I'm trying to get the values of certain td within this table. The first two variables work just fine because they are within the same table row; however, the last variable is not capturing the data I want (inside the index class).
I'm having some trouble understanding these methods of tree traversal and how I can grab data within a table row that is not the one which contains the button that is clicked. Any advice would be appreciated, thank you.

There were a few syntax errors in your code that you need to clean up, but the issue you're having with getting the value in the index cell is that you're not going far enough up the DOM tree to run the .find() command.
$(".add").on('click', function(){
var the_name = $(this).closest("td").siblings(".name").text();
var the_type = $(this).closest("td").siblings(".type").text();
var the_index = $(this).closest("table").find("td.index").text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="display: none";><td class="index">index_value</td></tr>
<tr><td>section header</td></tr>
<tr>
<td class="name">Steven</td>
<td class="height">6 ft.</td>
<td><button class="add">Add</button></td>
</tr>
</table>

Copy data between specific <td> tags using jquery

I've a table like this:
<table>
<tr>
<td class="type">Order</td>
<td class="orderid">1002</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Order</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
</table>
I've a script to copy data from a particular "#id" or ".class" element. What, I needed is to find a way to get the data of that particular row whenever, the Copy button is pressed. I want the columns 'orderid' and 'type' values of that particular row to be copied, but I'm not able to find a way to extract the data between the <td> tags with same class names.

Simple answer:
$('.copy').click(function(){
var order_id = $(this).parent().parent().find('.orderid').text();
var type = $(this).parent().parent().find('.type').text();
alert(order_id); ///this wil get you the value
});
I made the result here: http://codepad.viper-7.com/ahsVfB
check it.

<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<button class="copy">Copy Row</td>
</tr>
$(".copy").click(
function(event)
{
var copy=($(event.target).parent().find('.type'));
var order=($(event.target).parent().find('.orderid'));
}
);
You must paste that copied date somewhere. Make this copy and order as global variables. When you click paste, use this variable's value

take a look on this fiddle http://jsfiddle.net/3p29x2s9/11/
var buttons=document.getElementsByClassName("copy");
console.log(buttons);
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
var columns = this.parentElement.parentElement.getElementsByTagName("td");
var type= columns[0].innerText;
var orderid=columns[1].innerText;
alert(type + " "+orderid);
}
}

Uncaught TypeError: undefined is not a function on .GetElementByID

Here's what I'm trying to do:
I have a table set up as follows:
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td id="1">1</td>
<td class = driver></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = driver></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="3">
I'm trying to get the information from this form to fill in the tables:
<form>
Driver Name:<br>
<input type="text" name="name">
<br>
Driver Draw:<br>
<input type="text" name="draw">
<div id="button">Add!</div>
</form>
I've written this bit of jquery to try to do that:
var main = function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var clear = "clear";
var draw2 = "#"+draw;
console.log(draw2);
$("draw2").getElementById(".driver").innerHTML = name;
}
)};
When I press the "Add" button I've made, I get the error "Uncaught Type Error: undefined is not a function" that points to .getElementByID.
Maybe I'm approaching it all wrong, but I'm trying to get the name of the driver to appear in the for the with the id of the number the driver drew.
Any ideas?

You're using jQuery, and you cannot use the standard getElementById on a jQuery collection object. You can use .find() instead, or get the real Element at some index. Here are two solutions:
$("selector").find("#your-id");
// or
$("selector")[0].getElementById("your-id");

Since, its jquery, it has the following syntax:
$(<selector>).function()...;
where, <selector> is the selector of the object(.class and #id).
so, instead of $("draw2").getElementById(".driver").innerHTML = name; use this:
$(".driver").html(name); or, $(".driver").text(name);

Make your code as simple as possible.
Try this, first edit your HTML code. Put a different class for your two elements that contains the driver class:
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td id="1">1</td>
<td class = driverName></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = driverDraw></td>
<td><div id="button">Clear!</div></td>
</tr>
Then edit your Javascript to something like this:
$(function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
$(".driverName").html(name);
$(".driverDraw").html(draw);
}
)};
if .html() wont work then change it to .text()
$(".driverName").text(name);
$(".driverDraw").text(draw);
Just a tip: When using jQuery dont combine syntax from javascript cause it will just give you errors. Instead, search for the jQuery equivalent of the javascript function: like innerHTML = 0 on native javascript is only .html(0) on jQuery or getElementById on native javascript is just simply a $ sign in jQuery.

I got it to work. Here's what I ended up doing, and a summary of the project.
This is my first JavaScript/JQuery project. I'm trying to write a program for a race track I race at that will create an entry list, calculate the heat lineups based on the number the driver randomly drew when entering, and then calculate feature lineups based on their results from the heats.
Here's the form the official will use to add each driver. The "add" button will run the jQuery script to fill the driver name into the row in the table equal to the number they drew.
<form>
Driver Name:<br>
<input type="text" name="name">
<br>
Driver Draw:<br>
<input type="text" name="draw">
<div id="button">Add!</div>
</form>
A sample of the table:
<thead>
<tr class="entryHead">
<th>Draw</th>
<th>Driver Name</th>
<th>clear</th>
</tr>
</thead>
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td>1</td>
<td class = "driver1" ></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = "driver2"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="3">
<td>3</td>
<td class = "driver3"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="4">
<td>4</td>
<td class = "driver4"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="5">
<td>5</td>
<td class = "driver5"></td>
<td><div id="button">Clear!</div></td>
</tr>
I have 60 rows in total. Right now, the ID doesn't do anything... I just left it there because I had it there earlier while I was experimenting, and I'm leaving it there in case it's useful earlier.
Then there's the classes "driver1", "driver2", "driver3", etc. That is for jQuery to use.
Here's my jQuery script:
function Driver(draw, name) {
this.draw = draw;
this.name = name;
}
var main = function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var clear = "clear";
var draw2 = "#"+draw;
var name2 = ".driver"+draw
console.log(draw2);
console.log(name2);
$(name2).text(name);
});
}
$(document).ready(main);
I'm making an object called "Driver" that I will use later. Right now, it's just there.
Creating the variable "name2" allows "$(name2).text(name);" to find the appropriate class in the row equal to "draw", and put the driver's name in that draw. For example, if Jeff Gordon draws 24, his name would go in row 24, and the "name2" variable for him would end up being "name24".
Does that make sense?
I got this part to work for now. Thanks for your help.

How to detect if a table contains a table?

I have multiple tables need to be nested with divs
Like this:
<table>
<tr>
<td>
<table>
<tr>
<td>EEE</td>
<td>EEE</td>
</tr>
</table>
</td>
</tr>
</table>
Then, I get each table with the code below:
var isert = inn.getElementsByTagName("table");
for(var i = 0 ;i<isert.length;i++)
{
var div = document.createElement("div");
var _t = isert[i];
var parent = _t.parentNode;
div.className = "extra";
parent.replaceChild(div, _t);
div.appendChild(_t);
}
}
So the table becomes:
<div class="extra">
<table>
<tr>
<td>
<div class="extra">
<table>
<tr>
<td>EEE</td>
<td>EEE</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
However, after I adding css styles to class "extra", they are overlapped. So what I need is a method like below to detect whether this table contains a table inside.
if( ! 'table' contains 'table'){
...adding the div...
}
I hope this could be solve by pure JavaScript. Thanks!

I don't know what kind of themes you're working with, but you would conceivably be able to solve this with pure CSS
table { some theme style; }
table table { revert to default style; }
EDIT
From what I understand after your update, you want to turn the following code int something that doesn't rely on jQuery, correct?
var curr = $(this);
if(!curr.has('table').length) {
getElementsByTagName is available on all tag nodes and will only yield child elements, so you could do that check as follows:
if(!curr.getElementsByTagName('table').length) {