Can anyone tell me why I cannot seem to sort this table? I downloaded sorttable.js from this site: http://www.kryogenix.org/code/browser/sorttable/#ajaxtables
<!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">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>XML Table Sorting</title>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jssort.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Sortable Table of Search Queries</h1>
<table id="sortableTable" class="sortable" cellspacing="0" cellpadding="0" ></table>
</div>
<script>
// load page and display table data
r(function()
{
alert('DOM Ready!');
loadXMLDoc();
sortTheTable();
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
function loadXMLDoc()
{
if (window.ActiveXObject)
{
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = 'false';
xmlDoc.load('Linux_Sort.xml');
}
else
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
createTable(xmlhttp);
}
};
xmlhttp.open("GET", "Linux_Sort.xml", false);
xmlhttp.send();
} // end else
}
function createTable(xml)
{
var i;
var xmlDoc = xml.responseXML;
var tableInsert = '<thead><tr><th id="problem_header"><span>Problem Type</span></th><th><span>Task</span></th><th id="page_header"><span>Page No.</span></th><th id="risk_header"><span>Risk</span></th></tr></thead>';
tableInsert +='<tbody>';
var x = xmlDoc.getElementsByTagName("record");
for (i = 0; i <x.length; i++)
{
tableInsert += '<tr><td class="lalign">' +
x[i].getElementsByTagName("actionplan")[0].childNodes[0].nodeValue +
'</td><td class="lalign">' +
x[i].getElementsByTagName("task")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("pageNo")[0].childNodes[0].nodeValue +
"</td><td class='risk'>" +
x[i].getElementsByTagName("risk")[0].childNodes[0].nodeValue +
"</td></tr>";
}
tableInsert += '</tbody>';
document.getElementById("sortableTable").innerHTML = tableInsert;
// document.getElementByTagName("tbody").innerHTML = tableInsert;
}
function sortTheTable()
{
var newTableObject = document.getElementById("sortableTable")
sorttable.makeSortable(newTableObject);
}
</script>
</body>
</html>
Here is the sample XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Linux xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<record>
<actionplan> OAv </actionplan>
<task>something here</task>
<pageNo>6</pageNo>
<risk>3</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>7</pageNo>
<risk>3</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>9</pageNo>
<risk>2</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>something here</task>
<pageNo>10</pageNo>
<risk>2</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>Disal1 root login via SSH</task>
<pageNo>12</pageNo>
<risk>1</risk>
</record>
<record>
<actionplan>Op</actionplan>
<task>Disable send and accept ICMP redirects</task>
<pageNo>13</pageNo>
<risk>1</risk>
</record>
</Linux>
I have the table piece working. however, I cannot seem to get it to sort. It is relevant to note that this information is being displayed via local files for use on a tablet browser. So far, it only displays in Firefox.
Put the tbody out of the loop:
var tableInsert = '<thead><tr><th id="problem_header"><span>Problem Type</span></th><th><span>Task</span></th><th id="page_header"><span>Page No.</span></th><th id="risk_header"><span>Risk</span></th></tr></thead>';
tableInsert +='<tbody>';
var x = xmlDoc.getElementsByTagName("record");
for (i = 0; i <x.length; i++)
{
tableInsert += '<tr><td class="lalign">' +
x[i].getElementsByTagName("actionplan")[0].childNodes[0].nodeValue +
'</td><td class="lalign">' +
x[i].getElementsByTagName("task")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("pageNo")[0].childNodes[0].nodeValue +
"</td><td class='risk'>" +
x[i].getElementsByTagName("risk")[0].childNodes[0].nodeValue +
"</td></tr>";
}
tableInsert += '</tbody>';
also don't forget double-quote around the id:
var newTableObject = document.getElementById("sortableTable")
As the ActiveXObject has no method to check readyState, a messy method is to call sortTable after using a setTimeout function
Related
I'm doing an array with Object Orientation and method creation for JavaScript and I have a question:
I made it where all of the employees display when clicking the "Show Employees" button including all of their info (It's all fictionalized by the way), however, I am having difficulties with pulling individual user's information, how do I go about clicking on an individual user and pulling only that information?
the function = showEmployee(); is where I am having the issue.
Here is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 9-1: Employee Database</title>
<script language="JavaScript" type="text/javascript">
// Complete the employeeObject constructor
// Remember t o add a method called showEmployee
function employeeObject(name,department,extension) {[]
this.name = name;
this.department=department;
this.extension=extension;
this.showEmployee=showEmployee;
}
// Instantiate 3 instances of employeeObject
// Important - Start your array index numbers with 1
var employees = new Array();
employees[0] = "Select Employee";
employees[1] = new employeeObject("Mai Li", "Sales", 551);
employees[2] = new employeeObject("Maria Alvarez", "Human Resources", 441);
employees[3] = new employeeObject("Tom Smith", "Marketing", 331);
len = employees.length;
function showEmployee() {
var info = ""
// Complete the showEmployee() function
alert(info);
}
function showAllEmployees() {
var info = "";
for (var i = 1; i < len; i++) {
info += "Employee: " + employees[i].name + "\n";
info += "Department: " + employees[i].department + "\n";
info += "Extension: " + employees[i].extension + "\n\n";
}
alert(info);
}
//-->
</script>
</head>
<body>
<h3>Employee Database</h3>
<hr />
<form name="empForm" id="empForm">
<strong>Select name to view information:</strong>
<select name="empName" onchange="employees[this.selectedIndex].showEmployee();this.selectedIndex=0;">
<script language="JavaScript" type="text/javascript">
for (var i = 0; i < len; i++) {
if(i == 0) document.write("<option>" + employees[i]) + "</option>";
else document.write("<option>" + employees[i].name) + "</option>";
}
//
</script>
</select>
<p>
<input type="button" value="Show All Employees" onclick=
"showAllEmployees();" />
</p>
</form>
</body>
</html>
`
Consider moving the definition of the showEmployee method into the constructor definition to put the member variables of an employee in scope.
function employeeObject(name, department, extension) {
this.name = name;
this.department = department;
this.extension = extension;
this.showEmployee = () => {
let info = `${this.name}, ${this.department}, ${this.extension}`;
// or however you wish to format info
alert(info);
}
}
Working snippet:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 9-1: Employee Database</title>
<script language="JavaScript" type="text/javascript">
// Complete the employeeObject constructor
// Remember t o add a method called showEmployee
function employeeObject(name, department, extension) {
this.name = name;
this.department = department;
this.extension = extension;
this.showEmployee = () => {
let info = `${this.name}, ${this.department}, ${this.extension}`;
// or however you wish to format info
alert(info);
}
}
// Instantiate 3 instances of employeeObject
// Important - Start your array index numbers with 1
var employees = new Array();
employees[0] = "Select Employee";
employees[1] = new employeeObject("Mai Li", "Sales", 551);
employees[2] = new employeeObject("Maria Alvarez", "Human Resources", 441);
employees[3] = new employeeObject("Tom Smith", "Marketing", 331);
len = employees.length;
function showAllEmployees() {
var info = "";
for (var i = 1; i < len; i++) {
info += "Employee: " + employees[i].name + "\n";
info += "Department: " + employees[i].department + "\n";
info += "Extension: " + employees[i].extension + "\n\n";
}
alert(info);
}
//-->
</script>
</head>
<body>
<h3>Employee Database</h3>
<hr />
<form name="empForm" id="empForm">
<strong>Select name to view information:</strong>
<select name="empName" onchange="employees[this.selectedIndex].showEmployee();this.selectedIndex=0;">
<script language="JavaScript" type="text/javascript">
for (var i = 0; i < len; i++) {
if (i == 0) document.write("<option>" + employees[i]) + "</option>";
else document.write("<option>" + employees[i].name) + "</option>";
}
</script>
</select>
<p>
<input type="button" value="Show All Employees" onclick="showAllEmployees();" />
</p>
</form>
</body>
</html>
You gotta add value to the <option> and pass it's value to the showEmployee function. Check out the working snippet
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 9-1: Employee Database</title>
<script language="JavaScript" type="text/javascript">
// Complete the employeeObject constructor
// Remember t o add a method called showEmployee
function employeeObject(name, department, extension) {
[]
this.name = name;
this.department = department;
this.extension = extension;
this.showEmployee = showEmployee;
}
// Instantiate 3 instances of employeeObject
// Important - Start your array index numbers with 1
var employees = new Array();
employees[0] = "Select Employee";
employees[1] = new employeeObject("Mai Li", "Sales", 551);
employees[2] = new employeeObject("Maria Alvarez", "Human Resources", 441);
employees[3] = new employeeObject("Tom Smith", "Marketing", 331);
len = employees.length;
function showEmployee(i) {
var info = "";
info += "Employee: " + employees[i].name + "\n";
info += "Department: " + employees[i].department + "\n";
info += "Extension: " + employees[i].extension + "\n\n";
alert(info);
}
function showAllEmployees() {
var info = "";
for (var i = 1; i < len; i++) {
info += "Employee: " + employees[i].name + "\n";
info += "Department: " + employees[i].department + "\n";
info += "Extension: " + employees[i].extension + "\n\n";
}
alert(info);
}
</script>
</head>
<body>
<h3>Employee Database</h3>
<hr />
<form name="empForm" id="empForm">
<strong>Select name to view information:</strong>
<select name="empName" onchange="showEmployee(this.value);">
<script language="JavaScript" type="text/javascript">
for (var i = 0; i < len; i++) {
if (i == 0) document.write('<option value="">' + employees[i]) + "</option>";
else document.write('<option value="'+i+'">' + employees[i].name) + "</option>";
}
</script>
</select>
<p>
<input type="button" value="Show All Employees" onclick="showAllEmployees();" />
</p>
</form>
</body>
</html>
I am attempting to display the data from a XML file to my website via JavaScript. I have used this JavaScript code on its own just with a basic HTML document and it works fine, displaying the data and allowing me to click and view other data in from the XML file.
However, when I copied the code to a page of my website, the code won't run and I keep getting the error message "Cannot read property 'getElementsByTagName' of null". I find this bizarre as it is the exact same code that I used with a basic HTML page and it worked fine...
I have attached the HTML from my website below. Any advice or a fixstrong text would be greatly appreciated.
<section id="middle_XML">
<h1>BOOK LIST</h1>
<div align ='center'>
<p>Click on a CD to display album information.</p>
<p id='showBook'></p>
<table id="demo"></table>
</div>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "booklist.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("book");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) {
table += "<tr onclick='displayBook(" + i + ")'><td>";
table += x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
function displayBook(i) {
document.getElementById("showBook").innerHTML =
"Artist: " +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +
"<br>About: " +
x[i].getElementsByTagName("about")[0].childNodes[0].nodeValue +
"<br>Price: " +
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
}
</script>
</section>
Below is the code that works on a basic HTML page. Why won't it work when copied across on to my webpage?
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<div align ='center'>
<p>Click on a CD to display album information.</p>
<p id='showBook'></p>
<table id="demo"></table>
</div>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "booklist.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("book");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) {
table += "<tr onclick='displayBook(" + i + ")'><td>";
table += x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
function displayBook(i) {
document.getElementById("showBook").innerHTML =
"Artist: " +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +
"<br>About: " +
x[i].getElementsByTagName("about")[0].childNodes[0].nodeValue +
"<br>Price: " +
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
I feel like I'm going to pull my hair out. I am trying to take some data from an xml file and put it into a table using javascript. I have looked at and followed about a million examples, but for some reason, I can't get it to work. I've been using DreamWeaver, Notepad++ and Brackets.
This is my html file.
<head>
//<meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>
<script language="javascript" type="text/javascript" src="script2.js"></script>
<title>Computer Science Faculty Information</title>
<h1>Computer Science Faculty Information</h1>
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
<tr>
<th>Name</th>
</tr>
</table>
my xml file
<?xml version="1.0?>
<department>
<employee>
<name>Ajay Katangur, Ph.D.</name>
<title>Program Coordinator</title>`
<office>CI 340</office>
<phone>361-825-2478</phone>
<email>ajay.katangur#tamucc.edu</email>
</employee>
</department>
and my js file
function readXML() {
"use strict";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
myFunction(xmlhttp);
}
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for(i = 0; i < x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;
}
I should mention that a large part of the js code here is from W3Schools. Please someone show me what I'm doing wrong. Thanks in advance.
Your code works as you can see in the snippet I've created below. However, as you noted in a comment, the problem is that your request isn't returning the XML file. Check the URL to make sure that it is correct.
Also make sure that your XML is correct. For example, your XML declaration is missing a quote mark, i.e., should be <?xml version="1.0"?> And make sure there are no spaces in the file before that declaration.
Run the snippet to see it work. You can edit the XML in the text box and click the button to see the changes.
function readXML() {
"use strict";
// simulated request
var xmlhttp={};
xmlhttp.responseText = window.data.value;
xmlhttp.responseXML = (new DOMParser()).parseFromString(xmlhttp.responseText, 'text/xml')
myFunction(xmlhttp);
/*
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
myFunction(xmlhttp);
}
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();
}
*/
}
function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;
}
textarea {
width: 90%;
height: 40em;
padding: 0.5em;
border: 1px solid black;
background-color: aliceblue;
}
table {
border-collapse: collapse;
}
td {
border: 1px lightgray solid;
padding: 2px;
}
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
<tr>
<th>Name</th>
</tr>
</table>
<h4>XML:</h4>
<textarea id="data">
<?xml version="1.0" encoding="UTF-8" ?>
<department>
<employee>
<name>John Smith, Ph.D.</name>
<title>Program Coordinator</title>`
<office>CI 340</office>
<phone>000-000-0000</phone>
<email>John.Smith#tamucc.edu</email>
</employee>
</department>
</textarea>
I'm trying to GET from the url: http://redsox.tcs.auckland.ac.nz/BC/Open/Service.svc/booklist
Then parse this into JSON, send the JSON format into a table creating function showTable().
The html file:
<!DOCTYPE html>
<html>
<head>
<title>Online Shop</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="myscripts.js"></script>
</head>
<body>
<h1 id="mainheader">Boutique</h1>
<table id="menuTable" align="center">
<tr>
<td><button onclick="getResults()">Browse shop</button></td>
<td><button onclick="joinShop()">join the shop</button></td>
<td><button onclick="showComments()">Your comments</button></td>
</tr>
</table>
<hr></hr>
<div id="bodyDiv">
</div>
</body>
</html>
The relevant javascript:
function getResults(){ //gotta change it to take appended shit after ".svc/"
var uri = "http://redsox.tcs.auckland.ac.nz/BC/Open/Service.svc/booklist";
var xhr = new XMLHttpRequest();
xhr.open('GET', uri, true);
xhr.onload = function (){
var resp = JSON.parse(xhr.responseText);
showTable(resp.value);
}
xhr.send(null);
}
function showTable(item) {
var tableContent = "<tr class='orderTitle'><td>book id</td><td>book title</td></tr>\n"//creating unique table heading column
for(var i = 0; i < item.length; ++i) {
var record = item[i];
if (i & 1 == 1){
tableContent += "<tr class='orderOdd'>";
}
else { //even row
tableContent += "<tr class='orderEven'>";
}
tableContent += "<td>" + record.Id + "</td><td>" + record.Title + "</td></tr>\n"
}
document.getElementById("bodyDiv").innerHTML = tableContent;
}
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);
});
}