We Keep Coding

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>

innerHTML and html:select tag

I'm using JavaScript to add drop down in the jsp by clicking a button but somehow its not working. Can someone please help me. I need to use html:select tag.
<script language="JavaScript" type="text/javascript">
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
cell1value='';
cell1value+='<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
</script>
html codes:
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test"/>
</form>
</body>
</html>
Thanks for your help

I made a jsfiddle to check it out... I think you might just need to have this javascript in the head tag.
Use F12 developer tools and try to debug the issue when you click the button. You might find that addRow() is undefined.
I also changed the code a little bit due to the fact that I am not versed in JSP - sorry! Is that what the
"<html:select..."
string was? I changed it to straight up html.
http://jsfiddle.net/e7z1efgr/
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell1value = '';
cell1value += '<select class="text1"><option value="code1">test 1</option></select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test" />
</form>
</body>
</html>

Your problem is the strange HTML you are inserting:
'<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>'
should be
'<select property="test1" styleId="test1"> <option value="code1">test 1</option> </select>'

What's the purpose? If you just need it to insert rows inside the table, it works fine already:
Look here:
http://codepen.io/anon/pen/NGNJrV
Can you elaborate the question please?

How to get table row index when the column textbox value change using jQuery

I want to get row index and text box values when the table price text box value changes. At the moment I'm getting some undefined value.
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control product">
</td>
<td>
<input type="text" oninput="javascript:GetValue(this);" class="form-control price">
</td>
</tr>
</tbody>
</table>
JavaScript
function GetValue(oTextBox) {
var price = oTextBox.value;
var product = oTextBox.parent().prev().innerHTML.value;
var rowindex = oTextBox.closest('tr').index();
}
I get this error:
TypeError: oTextBox.parent is not a function
var product = oTextBox.parent().prev().innerHTML.value;

You need to wrap oTextBox in $ in order to use jQuery methods. That's because oTextBox ... or ... this is a DOM element and not a jQuery object. Thus:
var product = oTextBox.parent().prev().innerHTML.value;
Should be:
var product = $(oTextBox).parent().prev().find('input').val();
And:
var rowindex = oTextBox.closest('tr').index();
Should be:
var rowindex = $(oTextBox).closest('tr').index();
SUGGESTION
I would encourage you to not use inline JS:
<input type="text" class="form-control price">
Then your jQuery would be:
$(function() {
$('input.price').on('input', function() {
var price = this.value;
var product = $(this).parent().prev().find('input').val();
var rowindex = $(this).closest('tr').index();
//....
});
});

Replace oTextBox in the function by $(oTextBox) and then you can use html() instead of innerHTML, like so
$(oTextBox).parent().prev().html()

Copy single value into multiple columns using JAVASCRIPT

I have this code here. I need to place the value entered by the user (say integer 10), compute an operation on it and enter the answer into the row defined by my table.
I am not able to copy the same value in the 4 columns. How should I change my code?
<html>
<table>
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
<button onclick="testfunc()">TEST</button>
</html>

getElementsByClassName gives you a list of elements and there is no method or property on that list to manipulate all the elements in it. To manipulate the elements you'll have to iterate through the elements individually.
cells = document.getElementsByClassName("demo");
for (var i = 0; i < cells.length; i++){
cells[i].innerHTML = tt*20;
}
http://jsfiddle.net/BzmBX/

Try this function:
function testfunc(){
var tt=document.getElementsByName("test")[0].value;
var tds = document.querySelectorAll('td.demo');
var nrtds = tds.length;
for(var i=0; i<nrtds; i++) {
tds[i].innerHTML = tt;
}
}

You can also use, id's instead of classes.
Try
<html>
<head>
<script type="text/javascript">
function testfunc()
{
var tt=document.getElementById("test").value;
//alert(tt);
var log;
log = tt*20;
for(i=1;i<=4;i++)
document.getElementById("c"+i).innerHTML = log;
}
</script>
</head>
<body>
<table border=1>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td id='c1'> </td>
<td id='c2'> </td>
<td id='c3'> </td>
<td id='c4'> </td>
</tr>
</table>
Enter Input: <input type="text" id="test" name="test"/>
<button onclick="Javascript:testfunc();">TEST</button>
</body>
</html>

You're almost there, only problem with the code is that the Javascript function getElementsByClassName returns a set of elements which have all the given class names.
So the correct Javascript code would be:
<script>
function testfunc() {
var tt = document.getElementsByName("test")[0].value;
// Loop through all demo table columns returned.
demoColumns = document.getElementsByClassName("demo");
for (var i = demoColumns.length - 1; i >= 0; i--) {
demoColumns[i].innerHTML = tt * 20;
};
// Incorrect.
// document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
In your example you were trying to set the inner HTML on a collection as opposed to a single DOM element.

You might probably want to restrict to changing the contents of the table only. So adding a id "demoTbl" for the table, and using document.getElementById("demoTbl").getElementsByClassName("demo") will only search for element with class "demo" in the table id="demoTbl"
<html>
<table id="demoTbl">
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
var sel = document.getElementById("demoTbl").getElementsByClassName("demo");
for (var i=0; i<sel.length; i++) {
sel[i].innerHTML = tt*20;
}
}
</script>
<button name="test" onclick="testfunc()">TEST</button>
</html>

How to get row of element in cell by javascript/jquery?

I have a simple table like this
<table id="tempTable">
<tbody>
<tr id="row_01">
<td>
<button onclick="btnclick(this);" >Save Row</button>
</td>
</tr>
<tr id="row_02">
<td>
<button onclick="btnclick(this);" >Save Row</button>
</td>
</tr>
</tbody>
</table>
function btnclick(e) {
var currentRow = $(e).parent().parent();
alert(currentRow.id);
}
I want to determine which row where the button clicked was placed. So I use some jquery method in btnclick() as you see abow. But sometime I don't know how deep level the button was placed in row (), so Im looking for a way to get an ancestor by tag <tr> of a element.
Anybody help me, thanks?

Try this :
function btnclick(e) {
var currentRow = $(e).closest('tr');
alert(currentRow.id);
}
The closest() function will return the closest ancestor referenced by its selector. In this case the selector is simple a <tr> element.
Taken from the jQuery docs :
.closest( selector )
Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.
A better method could be used if you change your HTML a little bit. If you placed the same class on each of your buttons.
Eg :
<td>
<button class="myBtnClass" >Save Row</button>
</td>
Then your jQuery would look like this :
$(".myBtnClass").on('click',function(){
var currentRow = $(this).closest('tr');
alert(currentRow.attr('id'));
});
This function will capture a click on any element with the .myBtnClass class.

The jQuery way is:
$('#tempTable').find('button').click(function() {
var currentRow = $(this).closest('tr');
});

how about using closest
function btnclick(e) {
var currentRow = $(e).closest('tr');
alert(currentRow.id);
}