We Keep Coding

How to get values of a full <tr> tag in javascript after on change?

I have created a table inside javascript, with 3 input tags
item_name,
item_value and
quantity.
On change quantity input tag, i want to get the values of all 3 input tags in that particular row to calculate the quantity. How to get the full data of <tr> ?
This is my table,
var tr = document.createElement("tr");
var td = document.createElement("td");
let key = entry[0];
let value = entry[1];
const item_name = document.createElement("input");
item_name.setAttribute("id", "item_name[]");
item_name.setAttribute("name", "item_name[]");
item_name.setAttribute("readonly", "readonly");
item_name.value = key;
td.appendChild(item_name);
tr.appendChild(td);
//$('#receipt_details').append(item_name);
const item_value = document.createElement("input");
item_value.setAttribute("id", "item_value[]");
item_value.setAttribute("name", "item_value[]");
item_value.setAttribute("readonly", "readonly");
item_value.value = value.amount;
//$('#receipt_details').append(item_value);
td.appendChild(item_value);
tr.appendChild(td);
const quantity = document.createElement("input");
quantity.setAttribute("id", "quantity[]");
quantity.setAttribute("name", "quantity[]");
quantity.value = 1;
//$('#receipt_details').append(quantity);
td.appendChild(quantity);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
$('#receipt_details').append(table);
const total_column = document.createElement("input");
total_column.setAttribute("id", "total_cost[]");
total_column.setAttribute("name", "total_cost[]");
total_column.value = Number(value.amount) * 1;
td.appendChild(total_column);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="receipt_details"></div>

You can try using input event like the following way:
var tr = document.createElement("tr");
var td = document.createElement("td");
let key = 'some key';
let value = {amount:'100'};
const item_name = document.createElement("input");
item_name.setAttribute("id", "item_name[]");
item_name.setAttribute("name", "item_name[]");
item_name.setAttribute("readonly", "readonly");
item_name.value = key;
td.appendChild(item_name);
tr.appendChild(td);
//$('#receipt_details').append(item_name);
const item_value = document.createElement("input");
item_value.setAttribute("id", "item_value[]");
item_value.setAttribute("name", "item_value[]");
item_value.setAttribute("readonly", "readonly");
item_value.value = value.amount;
//$('#receipt_details').append(item_value);
td.appendChild(item_value);
const quantity = document.createElement("input");
quantity.setAttribute("id", "quantity[]");
quantity.setAttribute("name", "quantity[]");
quantity.value = 1;
const total_column = document.createElement("input");
total_column.setAttribute("id", "total_cost[]");
total_column.setAttribute("name", "total_cost[]");
total_column.value = Number(value.amount) * 1;
td.appendChild(total_column);
tr.appendChild(td);
td.appendChild(quantity);
tr.appendChild(td);
const tbody = document.createElement("tbody");
tbody.appendChild(tr);
const table = document.createElement("table");
table.appendChild(tbody);
$('#receipt_details').append(table);
$('table input').on('input', function(){
var parent = $(this).closest('tr');
var value = parent.find('[name="item_value[]"]').val();
var amount = parent.find('[name="quantity[]"]').val();
var total_cost = value * amount;
parent.find('[name="total_cost[]"]').val(total_cost);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="receipt_details"></div>

var value = $('tr').text();
if you can give id or class to the tr then it will be like e.g ( ) then it will be like
var value = $('#tablerow').text();

you can get it like this fiddle
quantity.onchange = function(e) {
var row = {};
$(e.target).closest('tr').find("input:text").each(function() {
row[$(this).attr("name")] = $(this).val();
});
console.log(row);
}

error to run function code in javascript has undefined [duplicate]

This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 4 years ago.
A table made containing the edit information field
a problem to run code undifined code in function
please help me to fix this error
"info" id table in html
function submit ()
{
var table = document.getElementById("info");
var td1 = document.createElement("td")
var td2 = document.createElement("td");
var row = document.createElement("tr");
td1.innerHTML = document.getElementById("p-name").value;
td2.innerHTML = document.getElementById("p-id").value;
row.appendChild(td1);
row.appendChild(td2);
table.children[0].appendChild(row);
create button in script
var bedit = document.createElement("BUTTON");
var bename = document.createTextNode("Edit");
bedit.appendChild(bename);
bedit.onclick = function () { edit_row(event) }
td6.appendChild(bedit);}
function code on click button in submit function
function edit_row()
{
bedit.style.display = "none";
bsave.style.display = "block";
var input = document.createElement("INPUT");
input.setAttribute("type", "text");
var string = td1.textContent;
td1.innerHTML = "";
td1.appendChild(input);
input.value = string;
}

Ok, try this. I added some comments.
function submit () {
var table = document.getElementById("info");
var td1 = document.createElement("td")
var td2 = document.createElement("td");
td1.innerHTML = document.getElementById("p-name").value;
td2.innerHTML = document.getElementById("p-id").value;
// create a table row
var row = document.createElement("tr");
row.appendChild(td1);
row.appendChild(td2);
// instead of your append
// table.children[0].appendChild(row);
// use this append
table.appendChild(row);
var bedit = document.createElement("BUTTON");
var bename = document.createTextNode("Edit");
bedit.appendChild(bename);
bedit.onclick = edit_row.bind(null, bedit, td1);
// createtd6 before because it is not known by your previous code
// I use this td2 instead of td6
td2.appendChild(bedit);
}
function edit_row(bedit, td1) {
bedit.style.display = "none";
// create bsave button before because it is not known by your previous code
// bsave.style.display = "block";
var input = document.createElement("INPUT");
input.setAttribute("type", "text");
var string = td1.textContent;
td1.innerHTML = "";
td1.appendChild(input);
input.value = string;
}
submit();
<table id="info"></table>
<hr/>
<input id="p-name" type="text" value="name_value" />
<input id="p-id" type="text" value="id_value" />

How to use javascript/jquery to loop through table?

I have a block of code like below
<tbody class="society_list">
<tr>
<td>1</td>
<td>Dummy</td>
<td>Dummy</td>
<td id="lol0">UPDATE THIS</td>
</tr>
<tr>
.....
</tr>
</tbody>
What I want to do is to loop through the whole table, find the td with an id, get the value of that id, and then update the html inside.
What I have for now(Sorry I'm quite new and I still don't have much idea what to do...)
function update(){
var trs = document.querySelectorAll('.society_list tr');
for(i=0;i<trs.length-1;i++){
trs[i].find('td').each(function(){
//I know I need to do something here but what's that..
});
}
}

Iterate through tds which have id attribute using the has attribute selector.
$('.society_list tr td[id]').each(function(){
var tdID = $(this).attr('id'); // <--- getting the ID here
var result = doSomeMagicWithId(tdID); // <--- doing something
$(this).html(result); // <---- updating the HTML inside the td
});

mate try use
$('#tblOne > tbody > tr').each(function() {...code...});

Here's a plain JavaScript version:
var os=document.getElementsByTagName('td');
for (var i=0;i<os.length;i++){
var o=os[i];
if (o.id){
o.innerHTML="updated "+o.id;
}
}
I'm tired of the argument that jQuery is really simple. Well under the hood it still has to match all the DOM elements. Some form of iteration still takes place. The plain JavaScript version isn't so bad and it doesn't HIDE complexity. And it runs in all browsers, including the IE versions that the jQuery folks deem "irrelevant".

If you know the id attribute, you don't need to loop through table. With jQuery it's so simple:
$('#lol0').text('What you want');
OR:
$('#lol0').html('What you want');
DEMO

function addRow(tableID,index)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.style.backgroundColor = "#FEF0FF";
rowCount = rowCount-1;
//row.id = "tr_add"+rowCount;
var cell1 = row.insertCell(0);
cell1.style.backgroundColor = "red";
cell1.style.align ="center";
var element1 = document.createElement("input");
element1.id = "chk"+(rowCount);
element1.name = "chk"+(rowCount);
element1.type = "checkbox";
//element1.style.textAlign="center";
var element111 = document.createElement("input");
element111.id = "chkbox"+(rowCount);
element111.name = "chkbox"+(rowCount);
element111.type = "hidden";
var element112 = document.createElement("input");
element112.id = "textCopy"+(rowCount);
element112.name = "textCopy"+(rowCount);
element112.type = "hidden";
element112.value ="COPY";
//cell1.innerHTML = "COPY";
cell1.appendChild(element1);
cell1.appendChild(element111);
cell1.appendChild(element112);
cell1.style.textAlign="center";
}
function addRow(tableID,index)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.style.backgroundColor = "#FEF0FF";
rowCount = rowCount-1;
//row.id = "tr_add"+rowCount;
var cell1 = row.insertCell(0);
//cell1.style.backgroundColor = "red";
//cell1.style.align ="center";
var element1 = document.createElement("input");
element1.id = "chk"+(rowCount);
element1.name = "chk"+(rowCount);
element1.type = "checkbox";
//element1.style.textAlign="center";
var element111 = document.createElement("input");
element111.id = "chkbox"+(rowCount);
element111.name = "chkbox"+(rowCount);
element111.type = "hidden";
var element112 = document.createElement("input");
element112.id = "textCopy"+(rowCount);
element112.name = "textCopy"+(rowCount);
element112.type = "hidden";
element112.value ="COPY";
//cell1.innerHTML = "COPY";
cell1.appendChild(element1);
cell1.appendChild(element111);
cell1.appendChild(element112);
cell1.style.textAlign="center";
document.getElementById('hdRowCount').value = rowCount+1;
document.getElementById('btnCopy'+rowCount).onclick = function(){addRow('tableToModify',rowCount);};
}
<table>
<tr>
<td>
<button type="button" name="btnCopy<%=i%>" id="btnCopy<%=i%>" value="Copy" onclick="addRow('tableToModify','<%=i%>');">Copy</button>
</td>
</tr>
</table>

html dynamically generating form but not giving the value of date in url when posting it

function addrow() {
document.getElementById("myTableData").style.display="block";
/*displaying div on click of button abc*/
var el = document.createElement('input');
el.type = 'text';
el.name = 'kname';
/*creating name field*/
var el_r = document.createElement('input');
el_r.type = 'radio';
el_r.name = 'gender';
el_r.value ='FEMALE';
el_r.id = "rad1";
el_r.defaultChecked = true;
/* creating radio button for gender field */
var el_r2 = document.createElement('input');
el_r2.type = 'radio';
el_r2.name = 'gender';
el_r2.value ='MALE';
el_r2.id = "rad2";
/* creating radio button for gender field */
var obj1 = document.createTextNode("Female");
var obj2 = document.createTextNode("Male");
var objLabel = document.createElement("label");
objLabel.htmlFor = el_r.id;
objLabel.appendChild(el_r);
objLabel.appendChild(obj1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = el_r2.id;
objLabel2.appendChild(el_r2);
objLabel2.appendChild(obj2);
/* creating drop down for date field */
var el_s = document.createElement('select');
el_s.onchange = function(){
var r = el_s.options[el_s.selectedIndex].value;
alert("selected date"+r); //cheking the selected date value;
}
for(var i=0;i<32;i++)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="day";
j.value=j;
el_s.appendChild(j);
}
var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December");
var el_sm = document.createElement('select');
for(var i=0;i<month.length;i++)
{
var j = i;
j = document.createElement('option');
j.text=month[i];
j.name="month";
j.value=month[i];
el_sm.appendChild(j);
}
var el_sy = document.createElement('select');
for(var i=2013;i>1950;i--)
{
var j = i;
j = document.createElement('option');
j.text=i;
j.name="year";
j.value=j;
el_sy.appendChild(j);
}
var table = document.getElementById("myTableData");
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width='175';
td.appendChild(el);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(objLabel);
td.appendChild(objLabel2);
tr.appendChild(td);
var td = document.createElement('TD');
td.width='245';
td.appendChild(el_s);
td.appendChild(el_sm);
td.appendChild(el_sy);
tr.appendChild(td);
myTableData.appendChild(table);
}
</script>
<input type="submit" value="submit"/>
i am dynamically generating form in HTML with the help of javascript on button click named abc. my code is working fine , when i am inserting values ,but when i am posting this form with the help of button the values name and gender is showing in address bar but the DATE ( element name"el_s") selected values is not showing in addressbar.
there are 2 buttons in first displays the div in which form is shown and next one is submit button of form

You must set el_s.name='date' in order for the data to be automatically posted.

Button click in each row in a dynamically created table to retrieve a column value of the corresponding row

//Button click in each row in a dynamically created table to retrieve a column value of the corresponding row
var rowCount = result.rows.length;// to count numrows coming from database
for(var j=1; j<=rowCount; j++)
{
var row = result.rows.item(j-1); // creating rowindex in the table
exercise =row.Exercise; // value from database
time= row.Time; // value from database
userid = row.UserId // value from database
var table = document.getElementById("check"); // table id
var row1 = table.insertRow(j); // Insert Row To Table
var cell1 = row1.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.value = exercise;
cell1.appendChild(element1);
var cell2 = row1.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = time;
cell2.appendChild(element2);
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.value = userid;
cell4.appendChild(element4);
cell4.style.dispalay="none";
element3.addEventListener('click', function () {
alert('event fired!');
// get the userid value of the clicked button as an alert
});
}

First of all assign each of the elements a unique id. For example:
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.type = "text";
element4.value = userId; // from DB
element4.id = "element4-" + j;
cell4.appendChild(element4);
Assign your edit button id = j.
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
element3.id = j;
cell3.appendChild(element3);
Then assign onclick handler to your edit button inside the for loop like this:
element3.onclick=doSomething;
Create a function doSomething()
function doSomething() {
for(var j=1; j<=rowCount; j++)
{
var value = document.getElementById("element" + j + "-" + this.id).value;
alert(value);
}
}
Hope this helps.

Try to give some row id and class to the columns then you can use
jQuery(".your_class").click(function(){
var column_value = jQuery(this).html();
});
did you mean something like this ?