Develop Reference

How can I make my second selection working in JavaScript?

I am using the selection. I am selecting a value and getting the result in an input box, but the problem is, it is only working in the first row of my selection and not working when I am clicking second selection. Here is the code, Please share if you can solve this one or advice.
<script type="text/javascript">
function displayResult()
{
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option> <option>Force</option><option>Angle</option><option>Area</option></select></td>';
document.getElementById("mycall2").insertRow(-1).innerHTML = '<td><input type="text" id="result1" size = "10" ></td>';
}
function fillgap(event){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistValue == "Force"){
document.getElementById("result1").value = xnumb;
}
}
</script>

Ok, so if i understand correctly
1) You want to add the: selection, results & + to the existing table
2) Add the options Force, Angle & Area to the select
3) If Force is selected, put the value '20' in the results td
4) When the + is clicked, a new row is added.
5 The newly added rows should behave exactly the same.
Given the above, I have done the following, I'm using jQuery as its simpler and I'm more familiar with it. Its easy.
The trick here is event delegation. at the time your page loads the new rows don't exist, that's why your JavaScript isn't working on them. you can read about it here: https://learn.jquery.com/events/event-delegation/
Here's the result:
$(document).ready(function() {
// add headers to table
$('table tr:first-child').append('<th>Result</th><th>Add</th>');
//add fields to table
$('table tr:not(:first-child)').append('<td><select class="selection"><option></option><option value="Force">Force</option><option value="Angle">Angle</option><option value="Area">Area</option></select></td><td class="result"></td><td><button type="button" class="displayResultBtn">+</button></td>');
// add new row when button is clicked
$('table').on('click','.displayResultBtn', function( event) {
var tRow = $(this).parent().parent().clone();
$(this).parents('table').append(tRow);
$('table tr:last-child td.result').empty();
});
// when the dropdown is changed, update the result to 20 if "Force" is selected.
$('table').on('change','.selection', function( event) {
var selection = $(this).val();
if (selection == "Force") {
$(this).parent().next().html('20');
// You can add more coditionals if you want to add didferent values for the other options.
} else {
$(this).parent().next().empty();
}
});
});
table,
td,
th {
border: 1px solid black;
white-space: nowrap;
}
table {
border-collapse: collapse;
width: 30%;
table-layout: auto;
}
td {
text-align: center;
vertical-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr>
<th>To</th>
<th>From</th>
<th>Detail</th>
<th>Selection</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>A+B</td>
</tr>
</table>

It's hard to answer with limited code provided, but I think your issue is that you are using id multiple times. Which is invalid. id should be unique and used once only.
I have put together some demo code here that will hopefully help you. It doesn't solve your exact problem(I dont have your html so i cant fully solve it). but hopefully this will give you an idea of how to handle accessing different rows, or specific unique ids.
I'm using jQuery here for simplicity, but the principle is the same:
Here's a fiddle if thats easier to play with: https://jsfiddle.net/BradChelly/4179e26q/
I hope this helps somewhat.
// highlight row by child selectors (:last-child)
$('#selectLastRowBtn').click(function(){
//clear any previous highlighting
$('#myTable tr:not(:first-child)').css('background-color','white');
// highlight the last row in the table.
$('#myTable tr:last-child').css('background-color','lightgrey');
});
// highlight row using a specific unique id
$('#selectRowByIdBtn').click(function(){
//get selected row id from dropdown
var rowId = $('#rowSelector option:selected').val();
//clear any previous highlighting
$('#myTable tr:not(:first-child)').css('background-color','white');
//highlight the row with the matching id from the selection dropdown
$('#myTable #row_'+rowId).css('background-color','lightgrey');
});
//
// ------Below is just stuff to make demo work, not relevant to the question
//
// Add row with unique id
$('#addNewRowBtn').click(function(){
var rowCount = $('#myTable tr').length;
$('#myTable').append('<tr id="row_'+rowCount+'"><td>23124</td><td>23124</td><td>23124</td><td>23124</td></tr>');
populateSelect(rowCount);
});
// populate select options
function populateSelect(rowCount){
$('#rowSelector').append('<option value="'+rowCount+'">'+rowCount+'</option>')
}
table {
width: 100%;
text-align: center;
}
table td {
border: 1px solid #333;
padding: 30px 0px;
}
table tr:first-child {
top: 0px;
background: #333;
}
table tr:first-child th {
color: #fff;
padding: 20px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
<th>Column Four</th>
</tr>
<tr id="row_1">
<td>23124</td>
<td>23124</td>
<td>23124</td>
<td>23124</td>
</tr>
</table>
<button id="addNewRowBtn">Add Row</button>
<h3>Using child selectors:</h3>
<button id="selectLastRowBtn">Highlight last row using child selector</button>
<h3>Highlight a row by id:</h3>
<select name="" id="rowSelector">
<option value="1">1</option>
</select>
<button id="selectRowByIdBtn">Highlight row by selected id</button>

Change table td using javascript

I am new to Javascript so take it easy on me. I want to change data inside a table using javascript. I have looked everywhere for a suitable tutorial but I haven't found any. This is my code.
function trans() {
var table = document.getElementById("table");
var row = table.getElementsByTagName("tr")[2];
var td = row.getElementsByTagName("td")[0];
td.innerHTML = "Julius";
}
**css**
table {
width: 100%;
border-collapse: collapse;
font-family: calibri;
}
tr,
th,
td {
border: 2px solid black;
padding: 10px 10px 10px 10px;
}
thead {
background-color: black;
color: white;
}
tbody {
background-color: white;
color: black;
}
.center {
text-align: center;
}
.caption {
text-align: center;
}
button {
background-color: blue;
color: white;
border-radius: 5px;
height: 25px;
}
<html>
<body>
<table id="table" title="Employment status verses Living Conditions">
<caption>Employment status verses Living Conditions</caption>
<thead>
<tr>
<th colspan="3" class="caption">Employment status verses Living Conditions</th>
</tr>
<tr>
<th>Name</th>
<th>State</th>
<th>Condition</th>
</tr>
</thead>
<tr>
<td>Antony</td>
<td>Employed</td>
<td>Poor</td>
</tr>
<tr>
<td>Grace</td>
<td>Student</td>
<td>Wealthy</td>
</tr>
<tr>
<td>Jane</td>
<td>Sponsored</td>
<td>Self actualization</td>
</tr>
<tr>
<td>Christine</td>
<td colspan="2" class="center"><i>Unknown</i>
</td>
</tr>
<tr>
<td rowspan="2">James and John</td>
<td>Fishermen</td>
<td>Spiritual</td>
</tr>
<tr>
<td>Brothers</td>
<td>Disciples</td>
</tr>
</table>
<button onclick="trans()">Change name</button>
</body>
</html>
When I run the code it gives me the following error,
{
"message": "Uncaught TypeError: table.getElementByTagName is not a function",
"filename": "http://stacksnippets.net/js",
"lineno": 96,
"colno": 15
}
I have changed the getElementByTagName to getElementsByTagName but it is still giving me an error, What is wrong with my code and what can I do to fix it. Find my jsfiddle here

This works:
Code snippet
Try this:
function trans() {
var table = document.getElementById("table");
var row = table.getElementsByTagName("tr")[2];
var td = row.getElementsByTagName("td")[0];
td.innerHTML = "Julius";
}
You selected the first tr that has no td , only th in it and you also forgot "s" in "getElementsByTagName".
Because with "Tag" you can get more then 1 element you need to add "s" , when it's by ID it makes sense that you will get only 1 item therefor no "s" is needed.

You're missing an s in your last line of Code.
Also, data already contains the element you want to edit, so there's no need to call getElementsByTagName on data.
Change this Line
data.getElementByTagName("td")[0].innerHTML = "Julius"
To
data.innerHTML = "Julius";

This should suffice.
function trans() {
var table = document.getElementById("table"),
tr = table.getElementsByTagName('tr')[2],
td = tr.getElementsByTagName('td')[0];
td.innerHTML = "Julius";
}
Issues:
In order to select a certain key "[2]" you need to use .getElementsByTagName instead of .getElementsByTagName;
You're targeting the wrong tr. There are tr's in the table head. So even with fixing the number 1 issue, you would not get the correct result.

Editable datas on button click

How do i make all td rows from text appear a textbox on button click to edit data in db. Example:
Before edit is clicked
After edit is clicked

Add a class to your table. When you click on a row, iterate through each cell in that row.
If there is no input elemenet, then get the content of the cell, clear the content and add an input element with the text.
Here is a working jsFiddle.
Warning: you should handle the name of the input values, and you should care about html tags in the value of the cells, if there are not only pure texts.
HTML
<table class="editable" style="border: 1px solid #000; border-collapse: collapse">
<tr>
<td style="border: 1px solid #000; padding: 10px;">This is a text</td>
<td style="border: 1px solid #000; padding: 10px;">Another text</td>
</tr>
</table>
jQuery
$('table.editable').on('click', 'tr', function () {
$(this).find('td').each(function () {
if ($(this).find('input').length < 1) {
let html = $(this).html();
$(this).empty();
$(this).append('<input name="value[]" value="' + html + '" />');
}
});
});

Container element inside of a table that holds rows

I am dynamically inserting a table row (or multiple rows) into a table upon an ajax call's return. I am looking to accomplish this by having an empty container type element inside of my html table that I can insert <tr> elements into. As I have seen from other posts, a div cannot hold a tr element, so my question is, is there a particular way that I can insert the html for row(s) into a table? It must be dynamic in nature, or in other words I need to be able to hold more than just one <tr>.

You can append to last row of table.
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
<script>
$( "#tableid tr:last" ).append(
</script>

Assuming you aren't using jQuery, you can do something like this:
var myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = myTable.insertRow(myTable.rows.length);
You can then insert cells using insertCell on row.
Alternatively, if you have jQuery,
$("#myTable").append("<tr><td>Table Row with cell!</td></tr>");

I'm not sure why you wouldn't just use the <table> element directly, but you can use <tbody> elements as row containers within a table.
onload = function(){
document.getElementById("aButton").onclick = addRow.bind(null, "a");
document.getElementById("bButton").onclick = addRow.bind(null, "b");
}
function addRow(id) {
var r = document.getElementById(id).insertRow(-1);
var c = r.insertCell(-1);
c.innerHTML = "Row added at " + new Date().toLocaleTimeString();
}
body {
font-family: sans-serif;
font-size: 12px;
}
table {
border-collapse: collapse;
margin: 8px 0;
}
td {
border: 1px solid #ccc;
padding: 1px 2px;
}
<button id="aButton">Add row to 'A'</button>
<button id="bButton">Add row to 'B'</button>
<table>
<tbody><tr><td>Before A</td></tr></tbody>
<tbody id="a"></tbody>
<tbody>
<tr><td>After A</td></tr>
<tr><td>Before B</td></tr>
</tbody>
<tbody id="b"></tbody>
<tbody><tr><td>After B</td></tr></tbody>
</table>

Find in jQuery only for first nested tree?

<table id="tab">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>
<table id="tab2">
<tr><td>dsf</td><td>dsf</td></tr>
<tr><td>dsf</td><td>dsf</td></tr>
</table>
</td></tr>
</table>
#tab td {
border: solid 1px red;
}
#tab2 {
background-color: green
}
$("#tab").find("tr").css("background-color", "red");
This function find all TR in #tab. i would like find only first TR, not nested TR.
Is possible without add class for TR? i would like make this only with jQuery.

find finds all descendant elements.
It sounds like you want .children('tr').
You can also do $('#tab > tr')

$("#tab>tr").css("background-color", "red");
that would do what I think you are trying to do XD
Otherwise you could try
$("#tab").find("tr:first-child").css("background-color", "red");
question was unclear :P