In javascript jquery html table is not displayed when appended through js

In javascript jquery html table is not displayed when appended through js - javascript

I am appending data in table body through js but when calling the getInvManhistory() method in docment.ready() it shows the table with appended data but when I call it onClick of search button it shows blank table. I debugged the code the data is appended at beginning but it get blank at the end.
Advance thanks. Please help.
var invsorno = "";
$(document).ready(function() {
// getInvManhistory(); When calling here the table gets displayed.
$("#search").click(function() {
alert("searchs");
getInvManhistory(); //when calliung with search button table is shown empty
});
// get_workflow_history();
});
function getInvManhistory() {
var tablebody = "";
invsorno = $("#invSrNo").val(),
$.cordys.ajax({
method: 'SearchInvManDetails',
parameters: {
invseqno: invsorno,
invtype: "",
FromDate: "",
ToDate: "",
},
async: false,
cache: false,
dataType: 'json',
namespace: 'http://schemas.cordys.com/IM_DBMetaData',
success: function(response) {
if ($.isArray(response.tuple)) {
var workflow_len = response.tuple.length;
for (var i = 0; i < workflow_len; i++) {
tablebody += "<tr>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
"</tr>";
}
} else if ($.isEmptyObject(response.tuple)) {
tablebody += "<tr align='center'>" +
"<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
"</tr>";
} else {
tablebody += "<tr>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
"</tr>";
}
$('#searchdetails tbody').html("");
$('#searchdetails tbody').append(tablebody);
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-ui.min.js"></script>
<script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script>
<script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script>
<script src='../IM_JSFiles/IM_Search.js' type='text/javascript'></script>
<title>Search</title>
</head>
<style>
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
<body>
<div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow: hidden; background-color: gainsboro;">
<div>
<h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
<div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
<form class="form-inline">
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="width: 48%;">
<label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
<input id="invSrNo" name="imInvSrNo" type="text">
</div>
<div class="form-group" style="width: 48%;">
<label for="investmentType" style="width: 125px;">Investment Type:</label>
<input id="investmentType" name="imInvestmentType" type="text">
</div>
</div>
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="width: 48%;">
<label for="fromDate" style="width: 125px;">From Date:</label>
<input id="fromDate" name="imFromDate" type="date">
</div>
<div class="form-group" style="width: 48%;">
<label for="toDate" style="width: 125px;">To Date:</label>
<input id="toDate" name="imToDate" type="date">
</div>
</div>
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="float: right;margin-right: 42px;">
<button id="search" class="btn btn-danger btn-md">Search</button>
<button id="view" class="btn btn-danger btn-md">View</button>
</div>
</div>
</form>
</div>
<div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
<table style="width: 100%" id="searchdetails">
<thead>
<tr style="background-color: red; color: #FFF;">
<th>Inv Sr.No</th>
<th>Initiator Name</th>
<th>Department</th>
<th>Role</th>
<th>Source WBC Code</th>
<th>Target WBC Code</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Problem is that you are using jquery selector $ but not referencing jquery in your code so I just add jquery reference in code like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Here is the complete working code
<!DOCTYPE html>
<html>
<head>
<style>
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var invsorno = "";
$(document).ready(function() {
// getInvManhistory(); When calling here the table gets displayed.
$("#search").click(function() {
alert("searchs");
getInvManhistory(); //when calliung with search button table is shown empty
});
// get_workflow_history();
});
function getInvManhistory() {
var tablebody = "";
invsorno = $("#invSrNo").val(),
$.cordys.ajax({
method: 'SearchInvManDetails',
parameters: {
invseqno: invsorno,
invtype: "",
FromDate: "",
ToDate: "",
},
async: false,
cache: false,
dataType: 'json',
namespace: 'http://schemas.cordys.com/IM_DBMetaData',
success: function(response) {
if ($.isArray(response.tuple)) {
var workflow_len = response.tuple.length;
for (var i = 0; i < workflow_len; i++) {
tablebody += "<tr>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
"<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
"</tr>";
}
} else if ($.isEmptyObject(response.tuple)) {
tablebody += "<tr align='center'>" +
"<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
"</tr>";
} else {
tablebody += "<tr>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
"<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
"</tr>";
}
$('#searchdetails tbody').html("");
$('#searchdetails tbody').append(tablebody);
}
});
}
</script>
</head>
<body> <div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow: hidden; background-color: gainsboro;">
<div>
<h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
<div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
<form class="form-inline">
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="width: 48%;">
<label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
<input id="invSrNo" name="imInvSrNo" type="text">
</div>
<div class="form-group" style="width: 48%;">
<label for="investmentType" style="width: 125px;">Investment Type:</label>
<input id="investmentType" name="imInvestmentType" type="text">
</div>
</div>
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="width: 48%;">
<label for="fromDate" style="width: 125px;">From Date:</label>
<input id="fromDate" name="imFromDate" type="date">
</div>
<div class="form-group" style="width: 48%;">
<label for="toDate" style="width: 125px;">To Date:</label>
<input id="toDate" name="imToDate" type="date">
</div>
</div>
<div style="width: 100%; padding: 10px 0px;">
<div class="form-group" style="float: right;margin-right: 42px;">
<button id="search" class="btn btn-danger btn-md">Search</button>
<button id="view" class="btn btn-danger btn-md">View</button>
</div>
</div>
</form>
</div>
<div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
<table style="width: 100%" id="searchdetails">
<thead>
<tr style="background-color: red; color: #FFF;">
<th>Inv Sr.No</th>
<th>Initiator Name</th>
<th>Department</th>
<th>Role</th>
<th>Source WBC Code</th>
<th>Target WBC Code</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Screen Shot:

Related

Setting the column widths of a dynamically created table to fit contents

I am dynamically creating a table and I want the column widths to shrink/expand to the size of the contents. I have tied:
#parTable tr td {
width: 1%;
white-space: nowrap;
}
And when creating the rows:
html += "<tr>"
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='patparId' value='' disabled></td>";
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='endDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='parDescription' class='fullWidth' value='" + parDescriptionArray[0] + "'></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' name='addPARbtn' class='btn-info' value='Add'></td>";
html += "</tr>";
The table is:
<!-- PAR table -->
<table class="table table-hover table-bordered" id="parTable">
<thead>
<tr>
<th>patparId</th>
<th>PAR</th>
<th>Start Date</th>
<th>End Date</th>
<th>Description</th>
</tr>
</thead>
<tbody id="parTablebody">
<tr>
<!-- Place for PAR details -->
</tr>
</tbody>
</table>
This is the resulting table:

How to break JSON data in multiple pages?

I have a html code and it it working fine for small json file and showing data in html table properly. But my problem is now that i have a big json file around 15000 html table row. So my page is not responding. How can i break 100 result per page till last result. I am sharing my html code.Please add some code in my html file and paste in answer section
<html>
<header><title>Welcome</title></header>
<body>
<!--javascript make append table data-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#userdata tbody").empty();
$(function() {
var user = document.getElementById("userId").value;
var category = location.search.split('id=')[1]
$.getJSON('abc.php',{"userId":user,"categoryId":category}, function(data) {
$.each(data.videos , function(i, v) {
var link = "youtube.php?id=youtu.be/"+ v.video;
var tblRows = "<tr>" + "<td>" + v.videoName + "</td>" + "<td>" + v.date + "</td>" +"<td>"+ v.time + "</td>" + "<td>" + v.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"WATCH/DOWNLOAD"+"</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata tbody");
});
});
$.getJSON('crp.php',{"userId":user,"categoryId":category}, function(data) {
$.each(data.other , function(i, f) {
var link =f.pdf;
tblRows2 = "<tr>" + "<td>" + f.dateText + "</td>" + "<td>" + f.textMessage + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"Click here to Download"+"</a></td>" + "</tr>";
$(tblRows2).appendTo("#userdata2 tbody");
});
});
});
</script>
<!--javascript append table data ended -->
<!-- user form -->
<form>
<input id='userId' type="hidden" value="500" placeholder="Enter Your User Id" name="userId" autofocus required>
</form>
<!-- user form -->
<!--table-->
<h1>VIDEO LIST</h1>
<!--<style>
.wrapper {
table tr td:nth-child(5) {
background: white;
}
}
.profile {
table, th, tr {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
}
}
}
</style>-->
<!--<style>
.button {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
tr:nth-of-type(odd) {
background: #eee;
}
}
</style>-->
<table class="button" id= "userdata" width="100%" border="20">
<thead>
<th>VIDEO NAME</th>
<th>DATE</th>
<th>TIME</th>
<th>DURATION</th>
<th>LINK</th>
</thead>
<tbody>
</tbody>
</table>
<!--table data end-->
<!--table-->
</body>
<body>
<style>
table tr td:nth-last-of-type(1) {
background: white;
}
table, th, tr {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
}
</style>
<h1>PDF LIST</h1>
<div class="wrapper2">
<div class="profile2">
<table id= "userdata2" width="100%" border="20">
<thead>
<th>DATE</th>
<th>NAME</th>
<th>LINK</th>
</thead>
<tbody>
</tbody>
</table>
</tr>
</div>
</div>
</body>
</html>

you have multiple options
1-use pagination like 1,2,3,4,etc
->this can be done using js and php or php with sql setting limit on your query and shift it when you choose another page
2-lazy loading on scroll -> this can be done using js
example using php with my sql
https://www.tutorialspoint.com/php/mysql_paging_php.htm

how can i delete row that i clicked its button?

I have table tag in cshtml page and append tr and td via ajax,now i dont know how to say delete row when i click on it,furthermore i dont know how to get value of inputs in each row.
/// <reference path="jquery-2.2.4.js"/>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "api/ProductsApi/GetProducts",
success: function (Products) {
debugger;
let item0 = '<tr>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'</tr>';
$("#AdminProductList").append(item0);
for (var i = 0; i < Products.length; i++) {
var d = Products[i].split("/");
let item = '<tr >' +
'<td><img src="/locker/' + d[0] + ' "alt="gnjh " style="width:70px;height:70px" /></td>' +
'<td>'+d[3]+'</td>' +
'<td>'+d[2]+'</td>'+
'<td>' + d[1] + '</td>' +
'<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
'<td id="'+i+'">' +
'<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input type="hidden" value="' + d[5] +'"/></button>' +
'<button data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</td>' +
'</tr>';
$("#AdminProductList").append(item);
}
},
error: function (f) {
debugger;
alert("nashod");
}
});
})
<div id="ListPage" style="display:none" class="product-status mg-tb-15">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="product-status-wrap" style="direction:rtl;">
<h4>f</h4>
<button style=" border: 0;width: 270px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: block;text-decoration: none;text-align: center;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.2em;color: #FFF;background: #bc3737;-webkit-box-shadow: 0 3px 1px #950d0d;-moz-box-shadow: 0 3px 1px #950d0d;box-shadow: 0 3px 1px #950d0d;" class="add-product" id="Edit"> افزودن محصول</button>
<table id="AdminProductList" style="direction:rtl;">
</table>
</div>
</div>
</div>
</div>
</div>
i dont kow how to say when i click,by id................................
...............................................................................
.........................................................
..................................................
........................................................................
......................................................................
.
.......................

I think you should add an event listener to the table rows in order to delete them:
$(document).on('click', '#AdminProductList>tr', function(){
$(this).remove()
});
And if you want to get input values, actually there are a lot of ways to do it. If you want to get all the input values, you can traverse over them like this:
function getInputValues(){
$('tr input').each(function(){
console.log($(this).val());
});
}

Try like this:
$.ajax({
type:'POST',
url:'delete.php',
data:{del_id:del_id},
success: function(data){
if(data=="YES"){
$ele.fadeOut().remove();
}else{
alert("can't delete the row")
}
}
})
})

$('button').click(function(){
var tr = $(this).closest('tr');
var inputs = tr.find('input');
alert($(inputs[0]).val());
alert($(inputs[1]).val());
tr.remove();
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" /></td>
<td>Hidden value here<input type="hidden" value="test hidden" /></td>
<td><button>Remove</button></td>
</tr>
</table>
You can use this script
$('button').click(function(){
$(this).closest('tr').remove();
})
or write click method
<button click="remove(this)" data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
function remove(item){
$(item).closest('tr').remove();
}
Updated: i create a demo for get input value.
var inputs = tr.find('input');
alert($(inputs[0]).val());
alert($(inputs[1]).val());

You need to add an on click event handler for the delete button and then delete that specific row.
I have edited your code to add the event listener and also delete the element.
/// <reference path="jquery-2.2.4.js"/>
$(document).ready(function () {
window.deleteTableRow = function (selector) { $('tr'+selector).remove(); }
$.ajax({
type: "GET",
url: "api/ProductsApi/GetProducts",
success: function (Products) {
debugger;
let item0 = '<tr>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'</tr>';
$("#AdminProductList").append(item0);
for (var i = 0; i < Products.length; i++) {
var d = Products[i].split("/");
let item = '<tr class="data-delete-index-'+ i +'">' +
'<td><img src="/locker/' + d[0] + ' "alt="gnjh " style="width:70px;height:70px" /></td>' +
'<td>'+d[3]+'</td>' +
'<td>'+d[2]+'</td>'+
'<td>' + d[1] + '</td>' +
'<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
'<td id="'+i+'">' +
'<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input type="hidden" value="' + d[5] +'"/></button>' +
'<button onclick="deleteTableRow(\'.data-delete-index-'+ i +'\')" data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</td>' +
'</tr>';
$("#AdminProductList").append(item);
}
},
error: function (f) {
debugger;
alert("nashod");
}
});
})

I want to append my data below the table and search when user clicks in the product id field

I have created a table and I want to add the data below the table but data is being added at the top,
I have written a search property when user enters the product id the data should be shown and can't figure out where my code went wrong,
I want to add serch field to all the buttons should I write the code many times is there any solution?
$(document).ready(function() {
var url = "http://34.201.147.118:3001/getAllData";
$.getJSON(url, function(data) {
console.log(data);
//console.log("AllData")
var obj = data['AllData'];
//console.log(obj)
for (var i = 0; i < obj.length; i++) {
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
}
});
});
function goodCall() {
$(document).ready(function() {
$("#id").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
body {
background-image: url("banner.jpg");
background-size: 100%;
}
#mytable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
#mytable td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Content -->
<div style="margin-left:25%">
<h1 style="color:white;">TITLE DETAILS</h1>
<div class="w3-container" id="add">
<div class="" style="color:white;">
<form name="test_form" id="101">
<table class="table borderless">
<tr>
<th>Title Identifier</th>
</tr>
<tr>
<td style="border:none">
<b>PRODUCT ID</b>
<br>
<input type="text" id="id" style="color:black;" required></td>
<td style="border:none"></td>
<td style="border:none">
<b>PRODUCT TITLE</b>
<br><input type="text" id="title" style="color:black;" required></td>
</tr>
<tr>
<td style="border:none">
<br> <b>director </b>
<br> <input type="text" id="ter" style="color:black;" required>
</td>
<td style="border:none"></td>
<td style="border:none">
<b>producer</b>
<br> <input type="text" id="media" style="color:black;" required>
</td>
</tr>
</table>
</form>
<input type="button" onclick="goodCall()" value="Search" style="color:Red;">
<table id='mytable'>
<tr>
<th>ID</th>
<th>PRODUCTTITLE</th>
</tr>
<div>
<br><br>
</div>
</table>
</div>
</div>
</div>

Here you have a basic functional example https://jsfiddle.net/0Lvqcd8t/39/
You should change this:
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
for this:
var tr = "<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child">'+ tr+'</tr>');
In the first case you are creating <tr><tr class="child><td></td></tr> (first <tr> is wrong) and browser will render something like <tr>tr</tr><tr class='child'>empty</tr> also, tr var in first example is not interpreted as variable, so you should place it like +tr+. I've made a basic filter function at the end that works with id.

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.

We Keep Coding

JavaScript is the programming language of the Web.

In javascript jquery html table is not displayed when appended through js - javascript

Related

Setting the column widths of a dynamically created table to fit contents

How to break JSON data in multiple pages?

how can i delete row that i clicked its button?

I want to append my data below the table and search when user clicks in the product id field

how to create a table with thead inside the getJSON

Categories

Resources