We Keep Coding

How to get checked checkbox table value in jquery

In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one
$(document).ready(function() {
$('#chemist_allotment_btn').click(function() {
if ($('#chemist_allotment_form').valid()) {
$.ajax({
url: 'update_chemist_bulk_transfer.php',
type: 'POST',
data: $('form#chemist_allotment_form').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function(key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td>' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td>' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
$('#SampleDT tbody').empty().append(htmlString);
$('#get_to_area').click(function() {
var id = $('input[name=getchemist]:checked').val();
if ($(".getchemist").prop('checked') == true) {
alert(id);
alert(value.to_area);
} else {
alert('Please Check');
}
});
} else {
$('#SampleDT tbody').empty().append('No Datas Found');
}
},
});
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<center>
<div class="form-group">
<button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>

Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>
Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select
Somewhat like this:
<tr class="row-select">
<td class="select">...</td>
<td class="id">...</td>
<td class="to-area">...</td>
.
.
.
</tr>
Use jQuery like this:
$('.row-select').click(function(){
var id,toArea,checkBox;
id = $(this).find('.id').html(); //get the ID field
toArea = $(this).find('.to-area').html(); //get the to-area field
checkBox = $(this).find('.select > input');
checkbox.prop('checked',!checkbox.prop('checked'));
})
This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox
To get the values of rows selected when the form is submitted run a loop like this
$('.row-select input:checked').each(function(){
var id,toArea,checkBox;
id = $(this).closest('tr').find('.id').html(); //get the ID field
toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})
EDIT
All together:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('.row-select input:checked').each(function() {
var id, name;
id = $(this).closest('tr').find('.id').html();
name = $(this).closest('tr').find('.name').html();
alert('ID: ' + id + " | Name: " + name);
})
})
$('#btnSelectAll').click(function() {
$('.row-select input').each(function() {
$(this).prop('checked', true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">12</td>
<td class="name">Jones</td>
</tr>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">10</td>
<td class="name">Joseph</td>
</tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>

Process step-by-step:
Give the td you need some classes (from-a & to-a);
Initialize an empty array all (we'll store the data inside it later on);
Create a function that is triggered by the checkbox change
Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
If the state = checked we will add the values to the all (our small data storage);
If the state = not-checked we will remove the value from the all array;
Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.
var all = [];
$('input[type="checkbox"]').change(function(){
var checkbox = $(this);
var state = checkbox.prop('checked');
var tr = checkbox.parents('tr');
var from = tr.children('.from-a').text();
var to = tr.children('.to-a').text();
if(state){
all.push(from + ' -> ' + to);
}else{
var index = all.indexOf(from + ' -> ' + to);
all.splice(index, 1);
}
})
$('#get_to_area').click(function(){
alert(all);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox"></td>
<td>1</td>
<td>Nick</td>
<td class="from-a">Kosur</td>
<td class="to-a">Nath Pari</td>
<td>Address</td>
</tr>
<tr id="2">
<td><input type="checkbox"></td>
<td>2</td>
<td>John</td>
<td class="from-a">Rusok</td>
<td class="to-a">iraP htaN</td>
<td>sserddA</td>
</tr>
</tbody>
</table>
<center>
<div class="form-group">
<button style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.

You can also use this fiddle:
In JS:
$('#get_to_area').click(function () {
var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
}
else {
alert('Please Check');
}
});
In Html:
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function (key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td class="chkid">' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td class="toarea">' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});

I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.
As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.
var Result = new Array();
$('.checkbox-custom input[type="checkbox"]:checked').each(function(){
var _this = $(this).closest('tr').find('td');
var id= $(_this).eq(0);
var name = $(_this).eq(1);
................... //Similar way for the others
Result.Push(id,name,....)
});

Controlling table with JS

I have written a very simple code
<!DOCTYPE html>
<html>
<body>
<table id="myTable" border = "1"></table>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</body>
</html>
I want to generate a table like this code snippet
<table border = "1">
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
</table>
But it's giving only one row while I have set for loop for 5 times. How to solve this.
I am facing one more problem. If I write javascript in head tag, I don;t get any output & it's saying "document.getElementById("myTable").innerHTML" is null. How to rectify it?
<!DOCTYPE html>
<html>
<head>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>

Problem 1
The problem is that you are overriding your tableRow again and again in the for loop. So, you need to move that outside the for loop. You will need to update your script to
var tableRow = ""; // moved outside the loop
for(var i = 1; i<=5; i++){
tableRow += "<tr>"; // appending <tr>
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
Problem 2
The issue is coming because you are trying to execute the code before the dom is rendered. Try it wrap it inside the onload function i.e.
window.onload = function(){
// your code here
};
For reference - https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var tableRow = "";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow += "<td>" + "JS Table" + "</td>";
tableRow += "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
};
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>

var tableRow="";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
<table id="myTable"></table>

how to create a table with thead inside the getJSON

<html>
<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:400px;
float:left;
padding:10px;
}
section {
width:600px;
float:right;
padding:10px;
}
</style>
</head>
<body>
<header>
<h1>Generate your own query</h1>
</header>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript">
var i=0;
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('result.json', function(jd) {
$('#stage').empty();
$('#stage').append('<p class="selected first"> Queries: ' + jd.queries_status+ '</p>');
var $tthead=$("#usertable thead");
//$tthead.html ="";
/* var theaddata="";
theaddata += "<tr>";
theaddata += "<th>" + query_id + "</th>";
theaddata += "<th>" + query_status + "</th>";
theaddata += "<th>" + query_result_number + "</th>";
theaddata += "<th>" + query_results + "</th>";
theaddata += "<th>" +action + "</th>";
theaddata += "</tr>";
$tthead.append(theaddata);*/
var $tbody = $("#usertable tbody");
$tbody.html("");
var tabledata = "";
for(i = 0; i < jd.list_of_queries.length; i++ ){
tabledata = "";
tabledata += "<tr>";
tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results_number + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results + "</td>";
tabledata += "<td>" + '<input type="button" value="details" onclick= "display(this)" name=" '+jd.list_of_queries[i].query_id+' " />' + "</td>";
tabledata += "</tr>";
$tbody.append(tabledata);
}
});
});
});
function display(value) {
$.getJSON('result.json', function(jd) {
var $tdetail = $("#detail tbody");
$tdetail.html("");
var tabledetail = "";
for(i = 0; i < jd.list_of_queries[value.name-1].list_of_tasks.length; i++ ){
tabledetail = "";
tabledetail += "<tr>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_id + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_status + "</td>";
tabledetail+= "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_operation + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].number_of_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].finished_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_result_number + "</td>";
tabledetail +="</tr>";
$tdetail.append(tabledetail);
}
});
}
</script>
</head>
<section>
<div id="stage1" >
Please enter your query <input type="text" name="query" size="50">
</div>
<div id="stage">
</div>
<br />
<input type="button" id="driver" value="submit query" formaction="http://localhost/queryexample.html"/>
<br />
<br />
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<thead>
<tr>
<th>query id</th>
<th>query status</th>
<th>query result_number</th>
<th>query results</th>
<th>action</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<br />
<form>
<input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html" >
</form>
</section>
<nav>
<table id="detail" border="1" cellpadding="5" cellspacing=0>
<tbody> </tbody>
</table>
<br />
</nav>
currently, I create the table at the initial page, with the thead of the table. Is it possible to make the thead and the tbody of the table inside the getJSON function? thanks in advance.The comment code is what I tried before, but it does not work, hope somebody could revise.

provisional header are shown

I am using the below code first time the code is working when i give print next time print is not working and then when i give refresh the browser is loading long time .
this is php code
<p><img src="images/logo_print.png" width="635" height="143" alt="" /></p>
<h3>Test title</h3>
<h4><strong>Authors : Author name</p>
<h4><strong>Author Address : </strong></h4><p>Author Address</p>
<h4><strong>Abstract : </strong></h4><p style="text-align:justify;"> abstract</p>
<h4><strong>Keywords : </strong></h4><p>Keyword</p>
<div class="cls" style="border-top:1px solid #656565; margin:10px 0px;"></div>
javascript code is
enter code here
function PrintParts(arrElementNames){
var objWindow=window.open("about:blank", "print", "left=0, top=0, width=800, height=430, toolbar=no, scrollbars=yes");
var strHtml="<html><link href='css/style.css' rel='stylesheet' type='text/css' />";
strHtml += "<head>";
strHtml += "</head>";
strHtml += "<body><table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#FFFFFF>";
strHtml += "<tr><td height=10> </td></tr></table>";
strHtml += "<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#ffffff><tr><td>"
for (var i=0; i<arrElementNames.length; i++){
var element=document.getElementById(arrElementNames[i]);
strHtml += element.innerHTML;
}
strHtml +="</td></tr> ";
strHtml +="</table>";
strHtml += "</body>";
strHtml += "</html>";
objWindow.document.write(strHtml);
objWindow.document.close();
objWindow.print();
objWindow.close();
}
the error is shown as:
CAUTION : Provisional headers are shown.
how can i solve this problem in this coding. i am really wast of my time but i can't solve this.

Output SQL result to a table

How can the code be modified below to dynanically generate the results of my SQL query to a table that would like the example table below? (2 items per table row)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
try {
alert("running function test")
var cn = new ActiveXObject("ADODB.Connection")
var rs = new ActiveXObject("ADODB.Recordset")
var sql = "SELECT * FROM tbl_rssims"
var db = "G:\\AS\\Asf\\ASF\\RSSIMS\\db\\rssims.mdb"
cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + db + "")
rs.Open(sql, cn, 1, 3)
var html = '<!DOCTYPE html>\n'
html += '<html>\n'
html += '<head>\n'
html += '<table style="border: none; table-layout: fixed; width: 100%; text-align: left;" cellpadding="0" cellspacing="0">\n'
//<!-- WRITE FIELD VALUES -->
while (!rs.eof) {
html += '<tr>\n';
for (var c = 0; c < rs.fields.count; ++c) {
html += '<td>' + rs.fields(c).value + '</td>\n'
}//end of for
html += '</tr>\n'
rs.movenext
}//end of while
html += '</table>'
window.open('','').document.write(html)
rs.close
cn.close
}//end of try
catch(e) {
alert(e.description)
}
}//end of function
</script>
</head>
<body>
<b>Example:</b>
<table style="border: none; table-layout: fixed; width: 100%; text-align: left;" cellpadding="0" cellspacing="0">
<tr>
<td>Mr. Ronald McDonald<br>Chief Executive Officer<br>The Hudson Bay Corporation<br>123 Yahoo Street<br>Toronto, Ontario<br>Canada</td>
<td>Mr. Steve Marin<br>Chief Executive Officer<br>General Motors<br>456 Don Mills Street<br>Toronto, Ontario<br>Canada</td>
</tr>
</table>
<input onclick="test()" type="button" value="button" id="button">
</body>
</html>

How about this:
html += '<tr><td>' + rs.GetString(2, -1, '<br>', '</td><td>', '') + '</td></tr>';
You want <br> between each column, and </td><td> between each row.

try something like this..
<php?
$query='select * from table_name';
$result=mysql_query($query);
?>
<table>
<tr>
<th>ID </th>
<th>Name</th>
</tr>
<?php
while($row=mysql_fetch_assoc($result)){
echo '<tr>
<td align="center">'.$row['id'].'-'.$row['sID'].'</td>
<td align="center">'.$row['name'].'</td>
</tr>';
}
?>
</table>