Develop Reference

Copying TD value to dynamically created input inside a TD

I have a table with dynamically generated td's that contain text inputs and I need to get the value from the first td in the row and insert into one of the inputs depending on what I select in a <select>. This is trigger by a button.
So far I'm able to get the the value I need with first-child and from my select I have the value of the option same as the class of the inputs.
$("#t_a").click(function() {
var selected = $('select[name=t_r]').val();
$("table tr").each(function() {
var s = $(this).find('td:first-child').html();
$(this).find('.' + selected).attr("value", s);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="t_r" name="t_r" style="width:200px;">
<option value="1234">Option 1234</option>
<option value="1235">Option 1235</option>
<option value="1236">Option 1236</option>
</select>
<input type="button" name="t_a" id="t_a" value="Apply" />
<table>
<tr>
<td>123</td>
<td><input type="text" id="a_1234" class="1234" value=""></td>
<td><input type="text" id="a_1235" class="1235" value=""></td>
<td><input type="text" id="a_1236" class="1236" value=""></td>
</tr>
<tr>
<td>321</td>
<td><input type="text" id="b_1234" class="1234" value=""></td>
<td><input type="text" id="b_1235" class="1235" value=""></td>
<td><input type="text" id="b_1236" class="1236" value=""></td>
</tr>
<tr>
<td>456</td>
<td><input type="text" id="c_1234" class="1234" value=""></td>
<td><input type="text" id="c_1235" class="1235" value=""></td>
<td><input type="text" id="c_1236" class="1236" value=""></td>
</tr>
</table>

With the help of monkawitz and user7290573 I was able to solve my problem by using val() instead of attr().
Thank you Tim Lewis for the guidance.

sending multiple rows from HTML to PHP and store in JSON

I need to provide option to user to enter multiple rows of data in form and save. I have html something like this.
<form id="books">
<table>
<tbody>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
</tbody>
</table>
<button id="AddRow">Add Row</button>
<button id="SubmitBook">Save</button>
</form>
I want to save data in JSON thru PHP. Can someone help how can I serialize my form to POST like below, let me know if I have to use HTML in different way to make this easier (I tried finding solution, couldn't find anyone fitting my requirement):
{
"books": [
{"bookName":"html", "author":"xxxxx", "publisher":"johnWiley", "year":"2010"},
{"bookName":"CSS", "author":"yyyyy", "publisher":"johnWiley", "year":"2011"},
{"bookName":"javaScript", "author":"aaaa", "publisher":"johnWiley", "year":"2012"},
{"bookName":"PHP", "author":"bbbbb", "publisher":"johnWiley", "year":"2013"}
]
}

var arr = [];
$('#SubmitBook').click(function() {
var tablerow = $('#table').find('tr');
tablerow.each(function() {
var bookname = $(this).find('td .bookName').val();
var author = $(this).find('td .author').val()
var publisher = $(this).find('td .publisher').val()
var year = $(this).find('td .year').val()
arr.push({
bookname: bookname,
author: author,
publisher: publisher,
year: year
})
})
console.log(JSON.stringify(arr))
})
Try like this
DEMO

Get all input values from table excluding first column

I want to alert the input value of each row except the first column.
Here is my code.
<table id="table">
<tr>
<td><input type="text" size="5" value="name"/></td>
<td><input type="text" size="5" value="number"/></td>
<td><input type="text" size="5" value="class"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="bbbbb"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="cccc"/></td>
<td><input type="text" size="5" value="5"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="ddddd"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
$(document).ready(function() {
$("#table tr:gt(0) td:gt(0) ").each(function()
{
a=$(this).find('input[type="text"]').val();
alert(a);
});
});
While running this code all value alerted except "bbbb". (ie,ccccc ,dddd alerted.). I only need each rows second one column onwords.
fiddle: https://jsfiddle.net/k1tfo5kb/

This should work:
https://jsfiddle.net/23jcejbm/
$(document).ready(function() {
var $cells = $("#table tr td").not(':first-child'),
$inputs = $cells.find('input[type="text"]');
$.each($inputs, function(){
var value = this.value;
alert(value);
});
});

Here you go: https://jsfiddle.net/pukw0uLz/1/
I changed alert to console.log, much less aggressive. Make sure to open you web console!

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);

Get values from table of text fields javascript

I have a form which actually is a table of text fields. The html looks like this:
<form>
<table id="table">
<tr>
<th>Player</th>
<th>Number</th>
<th>Con.per.day</th>
<th>P.100.kg</th>
<th>P.day</th>
<th>I.month</th>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>Result</td>
</tr>
</table>
<input type="button" name="rank" value="Rank" onClick="rankPlayers(this.form)"/>
</form>
I would like to iterate all fields and get the values at the press of the button, but I get undefined returned in the console log. I don't want to use IDs for each field as I want to do some column operations (add, multiply). My script for the first column looks like this:
function rankPlayers(){
var table=document.getElementById("table");
for(var i=1; i<table.rows.length;i++){
console.log(table.rows[i].cells[0].value);
}
}
Any tips? Thanks

You need to select the input from the cell:
// ------------------------------------v
console.log(table.rows[i].cells[0].firstChild.value);
If you could have siblings (even whitespace) around the inputs, then you can use the .children collection to target the correct element.
// ------------------------------------v
console.log(table.rows[i].cells[0].children[0].value);

You can change your loop to:
var table=document.getElementsByTagName("td");
for(var i=1; i<table.length;i++){
console.log(table[i].firstChild.value);
}
This gets all td elements, loops them, and checks the firstChild value