Develop Reference

Convert getted result of InnerHTML text to an element

I have some code :
<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' />
</td>
</tr>
...
</tbody>
<table>
I want to get innerHTML of myTdId td element and get value of text input. Is it possible?
for example :
var tdInnerHTML = document.getElementById('myTdId').innerHTML;
// convert this to element operation and access to value of it ...
console.log(tdInnerHTML.value); // :(
please help me, THANKS...
EDIT :
I do not access to input text!

How about using childNodes to navigate?
It is an array containing nodes of contained elements.
In your case...
var tdInputVal = document.getElementById('myTdId').childNodes[0].value;
console.log(tdInputVal ); // :(

Can you add Id on the input itself?
<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' id="myInput" />
</td>
</tr>
...
</tbody>
<table>
Then access it via
var input = document.getElementById('myInput').value;
Or access it via tag
var input = document.getElementsByTagName("input")[0].value;

Alternative clear way is to have id or class on your HTML so you can get inner value easily.
For example
HTML:
<input id="text-input" value="">
Javascript
var inputValue = document.getElementById('text-input').value;
console.log(inputValue);
jQuery version
var inputValue = $('#text-input').val();
Hope this helps.

I dont think you need to call innerHTML on that element. You need to get child of the td element with id "myTdId". To do that you can use
var tdElement = document.getElementById('myTdId');
console.log(tdElement.children[0].value);
This should get you the value of the td Element without the need of setting id or class to the td element.
I am assuming you have only one element inside the td;
I did not test the code but it should work.

Use getElementById than use on result object also getElementBy_XXX .
If you use getElementsByClassName or TagName you will get array of child element.
//ELEMENT
var tdElement = document.getElementById('myTdId');
// INNER HTML
var tdInnerHTML = document.getElementById('myTdId').innerHTML;
var childElement = tdElement.getElementsByTagName("input");
//if td is only and always first element than we can use :
//childElement[0]
alert(childElement[0].value)
<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' />
</td>
</tr>
</tbody>
<table>
<script>
// I dont use this function but you can if you want
function getElementInsideElement(baseElement, wantedElementID) {
var elementToReturn;
for (var i = 0; i < baseElement.childNodes.length; i++) {
elementToReturn = baseElement.childNodes[i];
if (elementToReturn.id == wantedElementID) {
return elementToReturn;
} else {
return getElementInsideElement(elementToReturn, wantedElementID);
}
}
}
</script>

// Use querySelector
var input = document.querySelector('#myTdId input');
var val = input.value;

jQuery, how to select dynamically generated html element

I have the following html dynamically generated by the Javascript code below it,
<tbody>
<tr class="student">
<td class="missed-col">0</td>
</tr>
</tbody>
Code that generates the html above,
var $tbody = $('tbody');
var $row = $('<tr></tr>').addClass('student');
var $nameCol = $('<td></td>').addClass('name-col').text(name);
var $missedCol = $('<td></td>').addClass('missed-col').text('0');
$row.append($nameCol);
$row.append($missedCol);
$tbody.append($row);
Then, I want to insert one more line before the missed-col class. And for some reason, I cannot reference $missedCol in the code above as the code jumps into a different function block. So, I did the following,
$('<td class="attend-col"><input type="checkbox"></td>').insertBefore($('tbody tr .missed-col'));
However, it does not work. I see the reason is jQuery is not able to select dynamically generated element this way. I have found some similar questions posted online, but cannot find a good answer.

Try passing the selector to insertBefore() instead of passing the jquery object, as it is a overkill.
HTML CODE:
$('<td class="attend-col">3</td>').insertBefore('tbody tr .missed-col');
Working demo # jsfiddle

Using LIVE or ON method can you achieve what you want
http://api.jquery.com/live/
below is simple example for that
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>

I had no prblem with this code onces place into a $(document)ready and replacing the tbody with a table.
$(document).ready(function(){
var $tbody = $('table');
var $row = $('<tr></tr>').addClass('student');
var $nameCol = $('<td></td>').addClass('name-col').text("test");
var $missedCol = $('<td></td>').addClass('missed-col').text('0');
$row.append($nameCol);
$row.append($missedCol);
$tbody.append($row);
$('<td class="attend-col"><input type="checkbox"></td>').insertBefore('table tr .missed-col');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
</table>

take a look at snippet..
$(function(){
var $tbody = $('tbody');
var $row = $('<tr></tr>').addClass('student');
var $nameCol = $('<td></td>').addClass('name-col').text(name);
var $missedCol = $('<td></td>').addClass('missed-col').text('0');
$row.append($nameCol);
$row.append($missedCol);
$tbody.append($row);
console.log($tbody.find(".student"));
//below line did the trick
$('<td class="attend-col"><input type="checkbox"></td>').insertBefore($tbody.find("tr .missed-col"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="student">
<td class="missed-col">0</td>
</tr>
</tbody>
</table>

how to add variable to 'classname' in jquery using match function?

I want to check the classname with pattern eg. sort-order12, sort-order13 using the match function in jquery.
The below usage is not working. Anyone can help ?
var sort_order = $('.js-data-selector.active:first').data('sort-order');
sort_order_next -> is the variable containing integer value.
var child = $("table tr td").filter(function() {
return $(this).prop("class").match(/"sort-order"+(sort_order_next)/)
}).closest("tr");
child.show();
I am trying to display the nodes with classname with pattern "sort-order-1", "sort-order-2" etc. according to the node value (sort-order-next) obtained.

Try this
var sort_order_next = 12;
var child = $("table tr td").filter(function() {
return $(this).prop("class").match(new RegExp('sort-order-' + sort_order_next));
}).closest("tr");
console.log(child);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="sort-order-12"></td>
</tr>
<tr>
<td class="sort-order-13"></td>
</tr>
<tr>
<td class="some-cls"></td>
</tr>
</table>

Find, Replace and Append new dom elements

My goal is to go through a table and append a new <tr> with the same data as it's previous sibling but with some altered content text.
A section of my html is as follows:
<tr>
<td><label>Share - Spanish</label></td>
<td><input type="text" id="blog_share_es" name="blog_share_es" size="30" /></td>
</tr>
Within my current function in Javascript the $(this) is the <label> tag. I have successfully taken the word "Spanish" and replaced it with "Italian" with the following:
var italian = $(this).text().replace("Spanish", "Italian");
and then append it to the table as follows:
var parentDiv = $(this).parent().parent();
$('<tr><td><label>'+italian+'</label></td><td><input type="text" id="logout_de" name="logout_de" size="30"/></td></tr>').insertAfter(parentDiv);
How do I now select the <input> and replace all instances of "_es" within the id and name with "_it" so that I get the following output in html (getting the formatting of the html is not necessary but would be optimal!):
<tr>
<td><label>Share - Italian</label></td>
<td><input type="text" id="blog_share_it" name="blog_share_it" size="30" /></td>
</tr>

Turned into a plug-in
DEMO
(function ($) {
$.fn.newRow = function (language, suffix) {
$lastSibling = this.find("tr").last().clone();
$label = $lastSibling.find("label");
$labelText = $label.text();
$label.text($labelText.replace($labelText.substring($labelText.indexOf("- ") + 2), language));
$input = $lastSibling.find("input");
$id = $input.attr("id");
$name = $input.attr("name");
$input.attr("id", $id.replace($id.substring($id.lastIndexOf("_") + 1), suffix))
.attr("name", $name.replace($name.substring($name.lastIndexOf("_") + 1), suffix));
this.find("tbody").append($lastSibling);
return this;
};
})(jQuery);
$("#yourTable").newRow("Italian", "it");

something like this... not sure if it 100% works, but gives you right direction
$('input[type=text]').each(function(input) {
if (input.attr('id').match(/_it/))
input.attr('id', input.attr('id').replace(/_it/, '_es');
if (input.attr('name').match(/_it/))
input.attr('name', input.attr('name').replace(/_it/, '_es');
})

To select the input starting from $(this) you have to use the function find(), and then you can change the attributes using the function attr()
var inp = $(this).parent().parent().find("input[type=text]");
inp.attr("id", inp.attr("id").replace("_es","_it"));
inp.attr("name", inp.attr("name").replace("_es","_it"));

How can I access elements inside a table in Javascript?

I have html that looks like this,
<table id="TableAddresses">
<tbody>
<tr>
<td>
string 1
</td>
<td>
<input type="hidden" id='ADDR_843886'
<div id='FLAG_843886'>Pending...</div>
</td>
</tr>
<tr>
<td>
string 2
</td>
<td>
<input type="hidden" id='ADDR_843886'
<div id='FLAG_843886'>Pending...</div>
</td>
</tr>
How do I get all the strings inside of TableAddresses > tbody >tr > td[0]?
EDIT:
I was mistaken in tagging jquery. This is actually a asp.net project.

An easy way would be to use querySelectorAll
var td = querySelectorAll("#TableAddresses tbody td")[0];
Otherwise you can do
var table = document.getElementById("TableAddresses");
var tbody = table.getElementsByTagName("tbody")[0];
var tr = tbody.getElementsByTagName("tr")[0];
var td = tr.getElementsByTagName("td")[0];
// etc

You can try this:
document.getElementById('TableAddresses').firstChild.firstChild.firstChild.innerHTML
or with less legacy support:
document.querySelector('#TableAddresses td').innerHTML

You can use the map method:
var strings = $('#TableAddresses td:first-child').map(function() {
return $.trim( this.textContent || this.innerText );
}).get(); // ["string 1", "string 2"]
Alternatively you can read the HTMLTableElement's rows property:
var rows = document.getElementById('TableAddresses').rows,
strings = [];
for (var i = 0; i < rows.length; i++) {
if ( rows[i].cells[0] ) {
strings.push( rows[i].cells[0].innerHTML );
}
}
http://jsfiddle.net/kvyUh/

Using jQuery:
var myString = $('#tableAddress td:first').text()
Cheers!

There's an MDN article on this topic. In a nutshell, you need to traverse your table with standard means, mostly getElementsByTagName, see this jsBin (look in the console).
var table = document.getElementById("TableAddresses");
var rows = table.getElementsByTagName("tr");
Array.prototype.forEach.call(rows, function(ele, idx) {
console.log(ele.getElementsByTagName("td")[0].textContent.trim());
});
This snippet traverses each row of your table and outputs the textContent of the first <td> element. Please note that this will most likely not work out of the box on older IE versions iirc, but nothing that can't be shimmed. ;-)