I have hardcoded two values which display a green icon on the one which has online status and red icon on the one which is offline. Now i want it to automatically add the green icon in the table when my function is called.
<div class="col-md-8">
<table class="table table-bordered table striped " id="thinker_table" >
<thead class="thead-dark">
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
<th>Indicator</th>
<th>Show Routines</th>
<th>Show Devices</th>
</thead>
</tr>
<td>IPLConference Room</td>
<td>XXXXXXXXXXXXX</td>
<td >Online</td>
<td>
<div class="led-green"></div>
<td> <input type="button" value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<tr>
<td>Host_34F60E </td>
<td>XXXXXXXXXX</td>
<td >Offline</td>
<td>
<div class="led-red"></div>
</td>
<tfoot >
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
</tfoot >
</table>
</div>
</div>
</div>
This is my javascript below im displaying the result in a table. the table should display a green icon where the status = 1. As my condition is if status = 1 hence i should get green icon on all the table row.
$(document).ready(function(){
$.getJSON("test.json", function(data){
var thinker_data = '';
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += '<tr>';
thinker_data += '<td>'+value.name+'</td>';
thinker_data += '<td>'+value.mac+'</td>';
thinker_data += '<td>'+value.status+ '</td>';
thinker_data += '</tr>';
}
});
$('#thinker_table').append(thinker_data);
});
});
</script>
The answer was helpful but now now i am getting the icon like this
also how do I add the two buttons as well in the table?
I'm not too sure I understand the question, but from what I've read, you want to display a green circle if the user has status=1. And you get that information from a json file.
Well you need to create the circles in css first!
Css:
.online {
height: 25px;
width: 25px;
background:green;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
.offline {
height: 25px;
width: 25px;
background:red;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
Then, when you create a new row, you had the "online" class to the column you want:
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += '<tr>';
thinker_data += '<td>'+value.name+'</td>';
thinker_data += '<td>'+value.mac+'</td>';
thinker_data += '<td class="online"></td>';
thinker_data += '<td></td>' //to make the "Indicator" column space
thinker_data += '<td> <input type="button" value="Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>'
thinker_data += '</tr>';
}
});
Do note I've created a sample input because I do not have access to the "test.json" file.
Check the JSFiddle for a working example.
If you also wan't a red circle for status=0, use the offline class!
$(document).ready(function() {
var thinker_data = '';
let data = {
"data": [{
"name": "text",
"mac": "SOMETHIN5239321",
"status": "1"
}, {
"name": "tex2t",
"mac": "S23THIN5239321",
"status": "1"
}]
};
$.each(data.data, function(key, value) {
if (value.status == "1") {
thinker_data += '<tr>';
thinker_data += '<td>' + value.name + '</td>';
thinker_data += '<td>' + value.mac + '</td>';
thinker_data += '<td class="online"></td>';
thinker_data += '<td></td>' //to make the "Indicator" column space
thinker_data += '<td> <input type="button" value=\Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>';
thinker_data += '</tr>';
}
});
$('#thinker_table').append(thinker_data);
});
.online {
height: 25px;
width: 25px;
background: green;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
.offline {
height: 25px;
width: 25px;
background: red;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-8">
<table class="table table-bordered table striped " id="thinker_table">
<thead class="thead-dark">
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
<th>Indicator</th>
<th>Show Routines</th>
<th>Show Devices</th>
</tr>
</thead>
<td>IPLConference Room</td>
<td>XXXXXXXXXXXXX</td>
<td>Online</td>
<td>
<div class="led-green"></div>
<td> <input type="button" value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<tr>
<td>Host_34F60E </td>
<td>XXXXXXXXXX</td>
<td>Offline</td>
<td>
<div class="led-red"></div>
</td>
<tfoot>
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
</tfoot>
</table>
</div>
EDIT:
I've edited the code and the snippet to repeat your buttons in every column. I think this is not the best solution, but you're not being very clear on what's your goal/what's your evironment.
I'm don't entirely follow the chain of events in this question, and where you are at now, but from what I gather you want to know how you can add buttons into your table with valid function calls onClick?
I prefer to use template strings when writing out html in javascript and just interpolating variables. Looks very clean
$(document).ready(function(){
$.getJSON("test.json", function(data){
var thinker_data = '';
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += `
<tr>
<td>${value.name}</td>
<td>${value.mac}</td>
<td>${value.status}</td>
<td>
<button onClick="location.href='https://www.example.com'">Click Me</button>
</td>
<td>/* Or an interpolated url in case it should be dynamic */</td>
<td>
<button onClick="location.href='${interpolatedUrl}'">Click Me</button>
</td>
</tr>
`;
}
});
$('#thinker_table').append(thinker_data);
});
});
</script>
Related
I am trying to create a button to delete a row in my table from the firebase database but I am not sure how to choose one specific row to delete using a button function. I am using javascript and firesource.
The function that i am using to fill my table is
function filled_table_start(num){
document.getElementById("tbody1").innerHTML = "";
members.forEach((member) => {
if(member.exists()){
row += '<tr id="student'+ (count+1) +'" >';
row += '<td>' + (count+1) +'</td>';
row += '<td>' + member.data().studentID + '</td>';
row += '<td>' + member.data().name + '</td>';
row += '<td>' + member.data().gender + '</td>';
row += '<td>' + member.data().schoolEmailAdd + '</td>';
row += '<td>' + member.data().handphoneNum + '</td>';
row += '<td><button type="button" onclick= "' + deleteDoc(doc(db,this.studentID ))+'" >Delete User</td>';
//row += '<td>' +
row += '</tr>';
document.getElementById('tbody1').innerHTML += row;
count ++;
};
});
}
I am wondering if something like this.deleteDoc will work? or is there another function that can be used to delete a specific row?
I just created a dummy demo table here. What I did is, simply give a class to each of the buttons, when you will click on the button, It will find the closest tr and remove it.
$("#tbody1").on('click', '.deleteDoc', function () {
$(this).closest('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>
<tbody id="tbody1">
<tr>
<th>Sl</th>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Mail</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<tr id="student1">
<td>1</td>
<td>11</td>
<td>ABC</td>
<td>F</td>
<td>abc#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student2">
<td>2</td>
<td>12</td>
<td>DEF</td>
<td>M</td>
<td>def#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student3">
<td>3</td>
<td>13</td>
<td>IJK</td>
<td>F</td>
<td>ijk#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
</tbody>
</table>
I’ve searched and consulted a lot of code but nothing is helping me to fix my problem.
What I have is just "add rows", but I want also the sum after adding the rows.
Here is a part of my code that adds a row to a table:
Code for adding rows
$(document).ready(function () {
$(".add-row").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td style='text-align:center'><input type='checkbox' name='record'></td><td>" + email + "</td><td class='sum_me' style='text-align: right;'>" + name + "</td></tr>";
$("table tbody").append(markup);
});
});
Html
<table id="countit">
<thead>
<tr>
<th width=50px>Delete</th>
<th width=150px style="text-align: center;">Inpayment of:</th>
<th width=50px style="text-align: center;">AMOUNT :</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="button" class="btn-success" value="Save Transaction" style="width: 150px; float: right;">
<br>
<br>
Create a function that sums the values and shows the result. call it after adding the row to the table.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateSum(){
var sum = 0;
$('.sum_me').each(function(item, index){
sum = sum + $(item).text();
});
$('#total').text(sum);
}
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val(); // input text
var email = $("#email").val(); // input text
var markup = "<tr><td style='text-align:center'><input type='checkbox' name='record'></td><td>" + email + "</td><td class='sum_me' style='text-align: right;'>" + name + "</td></tr>";
$("table tbody").append(markup);
updateSum();
});
});
</script>
You can use tfooter after the tbody to hold this total value
<table id="countit">
<thead>
<tr>
<th width=50px>Delete</th>
<th width=150px style="text-align: center;">Inpayment of:</th>
<th width=50px style="text-align: center;">AMOUNT :</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr><td></td><td></td><td id="total"></td></tr>
</tfoot>
</table>
<input type="button" class="btn-success" value="Save Transaction" style="width: 150px; float: right;">
I have a table that is filled dynamically with a csv file. I created a table that inside itself has dropdowns in some columns.
What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.
Here is a jsFiddle with an example as how my code currently looks like:
https://jsfiddle.net/r236uy5k/
EDIT : I corrected my jsfiddle:
https://jsfiddle.net/kcau7jhd/
$(function(){
var firstDDM = ['aaa','bbb','ccc','ddd'];
var firstshortcut = ['a','b','c','d'];
var option = "",
select = "";
for(var i=0; i<firstDDM.length;i++){
option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(3)").append(select);
});
});
$(function(){
var secondDDM = ['Default','AAA','BBB','B1','C'];
var secondshortcut = ['Default','a','b','b1','c'];
var option = "",
select = "";
for(var i=0; i<secondDDM.length;i++){
option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>';
}
select = '<select class="secondDDM" type="secondDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(5)").append(select);
});
});
$("#addRow").click(function(){
$("#my_id").each(function(){
var tds='<tr>';
jQuery.each($('tr:last th', this), function(){
tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
});
jQuery.each($('tr:last td', this), function(){
if($('select',this).length){
tds+= '<td>' + $(this).html() + '</td>';
}else{
tds+= '<td></td>';
}
});
tds+= '</tr>';
$('tbody',this).append(tds);
$('#my_id tbody tr:last').attr("contentEditable", true);
});
});
//for the columns that need to be imported with dropdowns create editable option - temporarlly
$(function() {
$("tr").each(function() {
$(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
});
});
//Find and remove selected table rows
$('#delete-row').click(function(){
var r = confirm('Are you sure you want to delete them all?');
$("tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
if(r == true){
$(this).parents("tr").remove();
}else{
return false;
}
}
});
});
table {
border-collapse: collapse;
border: 1px black solid;
font: 12px sans-serif;
width: 100%;
table-layout:auto;
}
td {
border: 1px black solid;
text-align: left;
padding: 2px;
}
thead:hover{
text-decoration: none !important;
}
thead tr:first-child{
color:white;
text-align: center;
background-color: #5bc0de;
padding: 10px;
}
tr:nth-child(even){
background-color: #f2f2f2
}
tr:hover{
background-color: #5bc0de;
}
button{
display: inline;
padding: 50px;
}
input button{
display: inline;
}
.dropbtn{
background-color: blue;
}
.table-responsive {
overflow-y: auto;
height: 800px;
}
.table-responsive table {
border-collapse: collapse;
width: 100%;
}
.table-responsive thead th{
position: sticky;
top: 0;
background-color: #5bc0de;
padding: 2px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.myButtons{
display: inline;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Filtered CSV File</title>
</head>
<body>
<h1>
Filtered CSV FIle
</h1>
<br/>
<br/>
<div class="myButtons">
<input type="button" value="Add new row" class="btn btn-info" id="addRow">
<input type="button" value="Delete rows" id="delete-row" class="btn btn-info">
</div>
<br/>
<div class="table-responsive">
<table class="dataframe my_class" id="my_id">
<thead>
<tr style="text-align:right;">
<th> </th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td></td>
<td>row1</td>
<td>B1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<th>2</th>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td></td>
<td>row2</td>
<td>AAA</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<th>3</th>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td></td>
<td>row3</td>
<td>C</td>
<td>row3</td>
<td>row3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You can edit the select text you are entering. Following are the things which I think you want to achieve:
Identify if the dropdown has a certain value and preselect them if possible.
If the dropdown does not have correct value for pre selection then mark them as error field.
If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.
I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.
Replace the following jquery snippets
$("tr").each(function () {
var option = "",
select = "",
classObject = '',
isSelected = false;
if($(this).find("td:eq(3)")[0]){
for (var i = 0; i < firstDDM.length; i++) {
if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
isSelected = true;
}
else
option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
classObject = !isSelected ? 'errorDropDown' : '';
select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'
$(this).find("td:eq(3)").append(select);
}
});
Add this class to the css file:
.errorDropDown {border: 1px solid red;}
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
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.