Develop Reference

javascript get/store data from table

I'm trying to catch the data based on the id's after clicking the button (like store them) in order to use it for inserting needed id's afterwards into the DB. The js written is not working as expected, any ideas what is missing? Thank you for the support.
<script>
function goo() {
idprod=$("#idprod").val();
nprod=$("#nprod").val();
lastprod=$("#lastprod").val();
solarprod=$("#solarprod").val();
locprod=$("#locprod").val()
}
</script>
<form name="goo" method="post">
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>

1- You are using val which is the attr Value. you should use html() or text() to get the value.
2- You have two rows, you should browse those two rows and get the data from each row
function goo() {
var firstRow = $(".test tbody tr").last();
idprod=firstRow.find("#idprod").html();
nprod=firstRow.find("#nprod").html();
lastprod=firstRow.find("#lastprod").html();
solarprod=firstRow.find("#solarprod").html();
locprod=firstRow.find("#locprod").html()
console.log(idprod)
}
$(document).ready(function(){
goo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="goo" method="post">
<table border="1" class="test">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>WK_Solar</th>
<th>Location</th>
<th>Save</th>
</tr>
</thead>
<tr>
<td id="idprod">P1</td>
<td id="nprod">James</td>
<td id="lastprod">Lee</td>
<td id="solarprod">$1555</td>
<td id="locprod">Queens</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
<tr>
<td id="idprod">P2</td>
<td id="nprod">Marc</td>
<td id="lastprod">Hoobs</td>
<td id="solarprod">$955</td>
<td id="locprod">Bronx</td>
<td><input type="hidden" name="active" value="active"><input type="submit" name="submit" value="goo"></td>
</tr>
</table>
</form>

Select all checkboxes under tbody not working

I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>

There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.

tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>

use button to pass td data

I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.

Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.

//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}

I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})

I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});

<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.

Enabled/disabled buttons when one checkbox or more are checked

To do this, I have a javascript file that count how many checkboxes in my form are checked, then:
if nothing is checked, these buttons: Change, delete, reset password will be disabled.
if one is checked, those will be all enabled.
if two or more is checked, Change will be disabled, the rest will still be enabled.
But in reality all of them stay disabled no matter what I do, so I wonder what I did wrong here.
Here is my code:
html:
<form action="" name="tform" method="POST">
<table>
<tr>
<td colspan="2">
</td>
<td colspan="3" align="right">
<input type="text" name="search_value" size="35"/><input type="submit" name="Search_clicked" value="Search"/>
</td>
</tr>
<tr>
<td colspan="5">
<table class="sortable" id="sortable_example" border="2">
<tr>
<th class="unsortable">Select</th>
<th>UserID</th>
<th>User name</th>
<th>Enable/Disable</th>
<th>Start date</th>
<th>End date</th>
</tr>
<tr>
<td><input type="checkbox" name="userid[]" value="1"/></td>
<td>00001</td>
<td>trang</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="11"/></td>
<td>00011</td>
<td>trangnt00914#fpt.edu.vn</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="12"/></td>
<td>00012</td>
<td>apgs1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="13"/></td>
<td>00013</td>
<td>congchua_cambuagietchim#yahoo.</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="14"/></td>
<td>00014</td>
<td>apgs1234#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="15"/></td>
<td>00015</td>
<td>apgs1104#yahoo.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr> <tr>
<td><input type="checkbox" name="userid[]" value="16"/></td>
<td>00016</td>
<td>trang1104#gmail.com</td>
<td>Enable</td>
<td>dd/mm/YYYY</td>
<td>dd/mm/YYYY</td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td><input type="submit" name="Add_clicked" value="Add"/></td>
<td><input type="submit" name="Add_massively_clicked" value="Add massively"/></td>
<td><input type="submit" name="Change_clicked" disabled value="Change"/></td>
<td><input type="submit" name="Delete_clicked" disabled onclick="return confirm('Are you sure?');" value="Delete"/></td>
<td><input type="submit" name="Reset_password_clicked" disabled onclick="return confirm('Are you sure?');" value="Reset password"/></td>
</tr>
</table>
</form>
and javascript:
var obj;
var count=0;
var Change = document.getElementsByName('Change_clicked')[0];
var Delete = document.getElementsByName('Delete_clicked')[0];
var Reset_password = document.getElementsByName('Reset_password_clicked')[0];
for (var i=0; i<tform.elements.length; i++) {
obj = tform.elements[i];
if (obj.type == "checkbox" && obj.checked) {
count++;
}
}
if(count==0){
Change.disabled=true;
Delete.disabled=true;
Reset_password.disabled=true;
}
if(count==1){
Change.disabled=false;
Delete.disabled=false;
Reset_password.disabled=false;
}
if(count>1){
Change.disabled=true;
Delete.disabled=false;
Reset_password.disabled=false;
}
Thank you for any help!

Your code is fine, the only thing you missed to wrap it to a function and add an event handler.
1) Using onchange event handler, for your checkboxes
example:
<input type="checkbox" onchange="fun()" name="userid[]" value="1"/>
2) Wrap your code to a function like
function fun() {
//add your code
}
See it is working in this JSFiddle

Try instead of using:
<input type="submit" name="Change_clicked" disabled value="Change"/>
just:
<input type="submit" name="Change_clicked" value="Change"/>
for each button and then on document.ready and onclick() event within a checkbox check the amount of enabled check boxes. Then apply your settings from your function.
Also instead of using
var Change = document.getElementsByName('Change_clicked')[0];
just use ids with your elements because they are present only once:
var Change = document.getElementsById('Change_clicked');
Edit: instead of onclick() trigger the function by onChange(), kudos to #Praveen

Remove table row after clicking table row delete button

Solution can use jQuery or be plain JavaScript.
I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:
<script>
function SomeDeleteRowFunction() {
//no clue what to put here?
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
</table>

You can use jQuery click instead of using onclick attribute, Try the following:
$('table').on('click', 'input[type="button"]', function(e){
$(this).closest('tr').remove()
})
Demo

you can do it like this:
<script>
function SomeDeleteRowFunction(o) {
//no clue what to put here?
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
</table>

Using pure Javascript:
Don't need to pass this to the SomeDeleteRowFunction():
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
The onclick function:
function SomeDeleteRowFunction() {
// event.target will be the input element.
var td = event.target.parentNode;
var tr = td.parentNode; // the row to be removed
tr.parentNode.removeChild(tr);
}

Following solution is working fine.
HTML:
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
JQuery:
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
I have done bins on http://codebins.com/bin/4ldqpa9

As #gaurang171 mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and use .remove() to remove it.
This is how we can implement it using jQuery click event instead of using JavaScript onclick.
$(document).ready(function(){
$("#myTable").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
});
});
table{
width: 100%;
border-collapse: collapse;
}
table td{
border: 1px solid black;
}
button:hover{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>ID</th>
<th >Name</th>
<th>Age</th>
<th width="1%"></th>
</tr>
<tr>
<td >SSS-001</td>
<td >Ben</td>
<td >25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-002</td>
<td >Anderson</td>
<td >47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-003</td>
<td >Rocky</td>
<td >32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-004</td>
<td >Lee</td>
<td >15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>