how to create a table with thead inside the getJSON - javascript

<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.

Related

JS + sweetalert - insert values from checkbox to input field

I must select from a window (done with sweetalert2) a row.
And insert them according to the column in each input of the following image
This is the code of the pop up...
function detalleTransf( detalle_transferencia_id, matricula, bancoorigenTransf, cbu_cta_origen, titular_cta_origen, ultimos_digitos_cta_origen) {
var datosTransferencia = {{ datosTransferencia|json_encode|raw }} ;
let html = "<html><body>"
html += "<div class='table-responsive'><table class='table table-hover table-condensed no-border'>" +
"<tr class='encabezado-tabla'> <td class='text-center'>Seleccionar </td><td class='text-center'> Matricula</td><td class='text-center'> Banco de Origen</td><td class='text-center'>CBU Cuenta Origen</td><td class='text-center'>Titular Cuenta Origen</td><td class='text-center'>Últimos 5 Dígitos Cuenta Origen</td> </tr>";
for (let row of datosTransferencia) {
html += "<tr id='algo'><td class='text-center'><div class='radio'><input type='checkbox' name='check' value='value' id='regular' onclick='unCheck(this)' ><label style='display: none'>" + row.detalle_transferencia_id + "</div></label></td>";
html += "<td class='text-center'>" + matricula + "</td>";
html += "<td class='text-center'>" + row.transf_banco + "</td>";
html += "<td class='text-center'>" + row.transf_cbu + "</td>";
html += "<td class='text-center'>" + row.transf_titular + "</td>";
html += "<td class='text-center'>" + row.transf_ctaorigen + "</td></tr>";
}
html += "</table></div>";
html += "</body></html>";
return html;
};
Example:
In the sweetalert window, I select a row with the check, the value of the "banco de origen" column... must go in the second image in the input field "banco de origen"
what i need is a function to insert the data from the window to de input field

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:

Append JavaScript variable to option element

I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN

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

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:

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>

Categories