Create HTML table with hyperlink from JSON Object - javascript

I have an application which returns a JSONObject. I am able to get data from JSON object using below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
table, td, th
{
border:1px collapse black;
font-family:Arial;
font-size :small;
}
th
{
background-color:green;
color:white;
}
.hideMe
{
/*display : none;*/
/*visibility: hidden;*/
}
</style>
<script type="text/javascript" language="jscript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
var host = "somehost";
var mystr = "http://"+ host +"/rest/bpm/wle/v1/exposed/process"; // use get for this
var ulink = "";
$(document).ready(function () {
$.get(mystr, function (data) {
var obj = JSON.parse(data);
var thtml = "<table id='proctable'>";
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function()' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
}
thtml = thtml + "</table>";
document.getElementById('contentdiv').innerHTML = thtml;
});
});
//javascript
my_function = null;
//jquery
$(function () {
function generateBPDInstance() {
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}
my_function = generateBPDInstance;
ulink = "";
})
`
</script>
</head>
<body>
<form name="myform">
<div id="contentdiv">
<table id="proctable">
</table>
</div>
</form>
</body>
</html>
The above html creates a table showing a list of the returned values. I also want to get rowIndex of hyperlink and pass value of column2 to function generateBPDInstance.
I am not so good at HTML and Jquery. Please suggest how can I get rowIndex for HTML table which is created through javascript.
Thanks in advance.

The simple way is :
change your table building to this
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "" + obj.data.exposedItemsList[i].display + "" + ulink + "";
function my_function(e){
//e is the row index and when you call document.getLementById("proctable").rows[e]; this will give you the complete row.
}
--this is a simple way, and if you want traverse the tree and get , you always have parentnode or you can use jquery $(object).parent() to get the parent of hyperlink and traverse.

You problem is "pass value of column2 to function generateBPDInstance". Why not pass it already while generating the table?
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function('" + ulink + "')' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
// ------------------------------------------------------^ pass the value
}
Add parameter to your function generateBPDInstance
function generateBPDInstance(ulink) {
//--------------------------^----
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}

Related

How To Convert CSV file to HTML table

i have csv file with the content :
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2
I create Javascript/HTML code to pick up that file and display the content
<html>
<head>
<title>show csv</title>
</head>
<body>
<input type="file" id="fileinput" multiple />
<div id="result"></div>
<script type="text/javascript">
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i=0, f; f=files[i]; i++) {
var r = new FileReader();
r.onload = (function(f) {
return function(e) {
var contents = e.target.result;
var res = document.getElementById("result");
res.innerHTML = "Got the file<br>"
+"name: " + f.name + "<br>"
+"type: " + f.type + "<br>"
+"size: " + f.size + " bytes</br>"
+ "starts with: " + contents;
};
})(f);
r.readAsText(f);
}
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change',readMultipleFiles, false);
</script>
</body>
</html>
and the output is like :
output
question : How can i convert the content or the data to array and showing as html table ?
thanks for any help.
You can convert csv data into array and then into html table. I have added \n into your new line. Please add the \n to your code when there is a new line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript"charset="utf-8">
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice(0,-1).split(",").join("</td><td>")
+ "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var div = document.getElementById('container');
div.innerHTML = output;
</script>
</body>
</html>
I found Kapila Perera's answer to be very useful. However, the last element of each row was being cropped due to the slice(0,-1) use. Building on Perera's answer, in the example below I've used slice() instead.
I've also separated out the first row lines[0] as a header row and loop from 1 instead (which won't always be the case that csv contains headers but is explicitly called out in the example).
Finally, I've added the tbody tags when the output gets wrapped but this probably isn't required.
<script type="text/javascript"charset="utf-8">
var div = document.getElementById('container');
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"), output = [], i;
/* HEADERS */
output.push("<tr><th>"
+ lines[0].slice().split(",").join("</th><th>")
+ "</th></tr>");
for (i = 1; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice().split(",").join("</td><td>")
+ "</td></tr>");
output = "<table><tbody>"
+ output.join("") + "</tbody></table>";
div.innerHTML = output;
</script>

Get Value in HTML Table using Button

I have a simple table that is populated using an array:
for (var i = 0; i < results.length; i++) {
var object = results[i];
(function($) {
$('#results-table').append('<tbody><tr><td>' + object.get('Name') + '</td><td>' + object.get('Description') + '</td><td><button class="button" onclick="goToClass()">View Class</></tr></tbody>');
})(jQuery);
Ideally I would like the goToClass() function to give me the object.ID for that individual row that was selected.
So for example, if I select the button on the first row in the table it would give me the object.ID for that class.
How would I do this?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<table id="results-table">
</table>
</body>
<script>
results = [
{Name:1,Description:"one",ID:1111},
{Name:2,Description:"two",ID:2222},
{Name:3,Description:"Three",ID:3333}
]
for (var i = 0; i < results.length; i++) {
var object = results[i];
(function($) {
$('#results-table').append('<tbody><tr><td>' + object['Name'] + '</td><td>' + object['Description'] + '</td><td><button class="button" onclick="goToClass('+object['ID'].toString()+')">View Class</></tr></tbody>');
})(jQuery);
}
function goToClass(id) {
console.log(id)
}
</script>
</html>
When I click the buttons, the console gives me the correct id in each case.

Table content does not display when using javascript array?

Below is my code but it does not work yet. What should I do to fix it?
See in particular function showtbl();
My real problem is in function showtbl(); which does not display the contents of the table.
var tampilqr = function (kode) {
var url = 'http://www.playstore.co.id/p/download.html?qr='
var urlfix = url + kode
var keluar = '<a style="float:right;color:#999;text-decoration:none;background:#fff;width:20px;text-align:center;font-weight:bold;" onclick="rem();">X</a><br>'
var cek = keluar + '<iframe src="' + urlfix + '"></iframe>'
if (jscd.os == 'Android') {
window.location.href = urlfix;
} else {
uglipop({
class: 'dl',
source: 'html',
content: cek
});
}
}
var tampilss = function (kode) {
var url = 'https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/detil.html?ss='
var urlfix = url + kode
var keluar = '<a style="float:right;color:#999;text-decoration:none;background:#fff;width:20px;text-align:center;font-weight:bold;" onclick="rem();">X</a><br>'
var cek = keluar + '<iframe src="' + urlfix + '"></iframe>'
uglipop({
class: 'ss',
source: 'html',
content: cek
});
}
var rem = function () {
remove();
}
function tulis() {
document.getElementById("cari").placeholder = "cari aplikasi";
if (on_index = true) {
window.location = window.location.pathname + '?apps='
}
}
function showtbl() {
var img = "<img src='logo/"
var imgt = ".png'/>"
var li = "<br /> Link: <a href='?apps="
var lin = "'>http://playstore.co.id/?apps="
var link = "</a><br /> Terbit: "
var b = "<button type='button' class='btn btn-danger' onclick='tampilss(""
var bt = "");'>Screenshoot</button><br><button type='button' class='btn btn-success' onclick='tampilqr(""
var btn = "");'>Download</button>"
var A1 = "ss-clothes"
var A2 = "korselindo"
var A3 = "real-hiphop-shop"
/* if HTML, it must be:
<tr>
<td><img src="logo/ss-clothes.png" /></td>
<td>SS-Clothes<br /> Link: http://playstore.co.id?apps=ss-clothes<br /> Terbit: 23-06-2015</td>
<td><button class="btn btn-danger" onclick="tampilss("ss-clothes");" type="button">Screenshoot</button><br />
<button class="btn btn-success" onclick="tampilqr("ss-clothes");" type="button">Download</button></td>
</tr>
*/
var values = new Array(3);
values[1] = [img + A1 + imgt, A1 + li + A1 + lin + A1 + link, b + A1 + bt + A1 + btn];
values[2] = [img + A2 + imgt, A2 + li + A2 + lin + A2 + link, b + A2 + bt + A2 + btn];
values[3] = [img + A3 + imgt, A3 + li + A3 + lin + A3 + link, b + A3 + bt + A3 + btn];
var myTable = document.getElementById("myTable");
// IE7 only supports appending rows to tbody
var tbody = document.createElement("tbody");
// for each outer array row
for (var i = 1; i < values.length; i++) {
var tr = document.createElement("tr");
// for each inner array cell
// create td then text, append
for (var j = 0; j < values[i].length; j++) {
var td = document.createElement("td");
var txt = document.createElement("span");
txt.innerHTML = values[i][j];
td.appendChild(txt);
tr.appendChild(td);
}
// append row to table
// IE7 requires append row to tbody, append tbody to table
tbody.appendChild(tr);
myTable.appendChild(tbody);
}
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<title>Download Aplikasi</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Toko aplikasi android Indonesia, apptoko, download aplikasi android .apk, appstore alternatif Google play store android market">
<link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/style.css" rel="stylesheet" />
<script src='https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/modernizr.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/jquery.dataTables.js"></script>
<link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/jquery.dataTables.min.css" rel="stylesheet" />
<script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/bootstrap.min.js"></script>
<script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/os.js"></script>
<link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/uglipop.css" rel="stylesheet" />
<script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/uglipop.js"></script>
</head>
<body onLoad="tulis();showtbl();">
<div id="atas">
<img src="http://1.bp.blogspot.com/-UON5Z5IIOus/VdH_gr8XRXI/AAAAAAAAAbY/Q-I4QfbZr9U/s1600/playstore-indonesia-logo.gif" />
</div>
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th>Logo</th>
<th>Nama App</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("img").error(function () {
$(this).hide();
});
var table = $('#myTable').dataTable({
"oSearch": {
"sSearch": $.urlParam('apps'),
responsive: true
},
});
});
$.urlParam = function (name) {
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results && results[1].replace(/(^\s+|[^a-zA-Z ]+|\s+$)/g, ' ');
return results && results[1].replace(/\s+/g, ' ');
if (!results) {
return '//';
}
return results[1] || '';
};
</script>
</body>
</html>
My real problem is in function showtbl(); which does not display the contents of the table.
Please run the code. What should I do to fix it?
My real problem is in function showtbl(); which does not display the
contents of the table.
If you remove the irrelevant empty <tbody><tr></tr></tbody> it works :
http://jsfiddle.net/yujpozf9/1/
dataTables does not like multiple <tbody> elements, and certainly not <tbody> elements with an odd number of columns (like none).
Also move responsive: true out to where it belongs and remove the trailing ' - you seem to have a lot of focus on IE7, trailing quotes is a IE7-killer.
var table = $('#myTable').dataTable({
responsive: true,
"oSearch": {
//"sSearch": $.urlParam('apps')
}
});
have commented out $.urlParam since this is not the main issue, and I not fully understand what you are trying to do. Your code is one of the most peculiar uses of dataTables I have ever seen (no offense!) - try read about column rendering, I think you will be much happier doing it this way -> https://datatables.net/examples/advanced_init/column_render.html - the official examples in general.
Also, instead of using google drive, you can use the dataTables CDN - much easier to maintain and change versions. I have noticed you are using v1.10.2 :
<script type="text/javascript" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"/>
As far as I remember, datatables plugin need well-formatted table to work properly. You need thead and tbody tags as it's specified in the doc (read it carefully : https://www.datatables.net/manual/installation). Once it's done you don't have to write all that code to filter and display what you want.

Search mechanism is not working in Html Table

Im working on search mechanism in html, it is working when i search the data at first time. if i search for next data, it wont search as expected. If i search with empty data, it wont display actual table(which displayed at initial time).
JsFiddle : http://jsfiddle.net/DHJ79/
Even any better pointer is also welcome, if my below code is not good.
My code:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style> td{border: thin solid;} </style>
<script type="text/javascript">
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
function addList(){
var table = "";
table += "<table class='table'>";
table += "<tr>";
table += "<td>S.no</td>";
table += "<td>Name</td>";
table += "<td>Gender</td>";
table += "</tr>";
for(i=0; i<10; i++) {
table += "<tr>";
table += "<td>"+i+"</td>";
table += "<td>Name"+i+"</td>";
table += "<td>"+( i > 5 ? "Male" : "Female")+"</td>";
table += "</tr>";
}
table += "</table>";
var body = document.getElementById("ListContainer");
body.innerHTML = table;
}
</script>
</head>
<body onload="addList();">
<input id="Button1" type="button" value="button" onclick="searchTable();" />
<input id="searchdata" type="text" />
<div id="ListContainer" > </div>
</body>
</html>
Advance thanks...
Maybe something like this.
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if (inputVal == "") {
$('.hideThis').removeClass('hideThis');
} else {
$('tr').addClass('hideThis');
$('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
}
}
modify your search function as follows:
function searchTable(inputVal) {
var inputVal = document.getElementById('searchdata').value;
if(inputVal){ //check for valid searches
//addList();
$('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
$("tr").css('display', 'none');
$(".showthis").parent().parent().css('display', '');
}
else{
addList(); // if you don't want to reinitialize table on empty searches skip this
}
}

retrieving array value on mouseover with javascript

I'm trying to figure out a way to retrieve and display the value of a div tag that is created with a 2D array using JavaScript. I figured either onclick or onmouseover would work but neither would in this approach. I would like to avoid creating 49 functions that does the same thing (just displaying the 'cell' the mouse is over).
<style type="text/css">
.float {float: left;}
.clear {clear:both;}
div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
<div id="grid"></div>
<div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
// ???
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>
Thanks!
You can simply get the cell id by passing this.id into the function.
Try this:
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
console.log(cellId);
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>
Right now you have set up each cell element to call the function displayMe whenever the mouseover event occurs. When you call that function, you are passing the variable cellId as an argument. The problem is when that function is called, cellId is not defined. You can see this error pop up in your browser's developer console ("Uncaught ReferenceError: cellId is not defined").
You probably want to pass the cell element's id property, which you define dynamically here: id='area" + i + j + "'. You can use the id property of an element to look up the element (as you have done already), and get the text it contains via textContent.
To pass the cell element's id property, you need to use the this variable, like so: this.id. this will refer to the element that is triggering the event. So, if you change your onmouseover value of your div element to this: onmouseover='displayMe(this.id)', it will pass the appropriate value to your displayMe function, allowing you to do something like this:
function displayMe(cellId) {
document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}
With these adjustments, your code will look like this in its entirety:
<style type="text/css">
.float {float: left;}
.clear {clear:both;}
div {border: thin solid blue; padding: 2px;}
</style>
</head>
<body>
<div id="grid"></div>
<div id="bucket" class="float"></div>
</body>
<script type="text/javascript">
var axisY = 7;
var axisZ = 7;
for (var i = 0; i < axisY; i++) {
for (var j = 0; j < axisZ; j++) {
document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>";
}
document.getElementById('grid').innerHTML += "<br class='clear' />";
}
function displayMe(cellId) {
document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent;
}
function displayNone() {
document.getElementById('bucket').innerHTML = "";
}
</script>

Categories