使用JSON對象的超鏈接創建HTML表格

我有一個返回JSONObject的應用程序。我能夠使用下面的代碼從JSON對象中獲取數據。使用JSON對象的超鏈接創建HTML表格

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

上面的HTML生成表示返回的值的列表的表。我也想獲得超鏈接的rowIndex並將column2的值傳遞給函數generateBPDInstance。

我不擅長HTML和Jquery。請建議如何獲取通過javascript創建的HTML表格的rowIndex。

在此先感謝。

來源

2012-08-30 myrachxp10

簡單的方法是：

變化表格構建本

爲（I = 0;我< obj.data.exposedItemsList.length;我++）{ ULINK =「HTTP：// 「+ host + obj.data.exposedItemsList [i] .startURL; thtml = thtml +「」+ obj.data.exposedItemsList [i] .display +「」+ ulink +「」;

function my_function（e）{e} {e是行索引，當您調用document.getLementById（「proctable」）。rows [e];這會給你完整的行。

}

- 這是一個簡單的方法，如果你想遍歷樹，並得到，你總是有parentnode，或者你可以使用jQuery $（對象）.parent（）來獲得超級鏈接的父並遍歷。

來源

2012-08-30 07:03:48

感謝reply.Above代碼只是生成純HTML表格。我在哪裏提供超鏈接並用rowIndex調用函數？ – myrachxp10

問題是「將column2的值傳遞給函數generateBPDInstance」。爲什麼不在生成表時通過它？

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 
}

添加參數給你的函數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);     
    }); 
}

來源

2012-08-30 07:04:32 timidboy

感謝您的回覆。我已經試過這個，但它會拋出javascript錯誤。網頁錯誤詳細信息：用戶代理：Mozilla/4.0（兼容; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727;。 NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E）時間戳：Mon，3 Sep 2012 04:03:33 UTC 消息：預期 '）' 行：1 字符：17 代碼：0 URI：文件：/// C：/Users/996458/Desktop/HTMLPage.htm 消息：預期 '）' 線：1 Char：17 代碼：0 URI：file：/// C：/Users/996458/Desktop/HTMLPage.htm – myrachxp10

可能是'ulink'附近的引號。更新它。 – timidboy

使用JSON對象的超鏈接創建HTML表格

回答

相關問題