使用JSON对象的超链接创建HTML表

时间:2012-08-30 06:49:50

标签: javascript

我有一个返回JSONObject的应用程序。我可以使用下面的代码从JSON对象获取数据。


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

提前致谢。

2 个答案:

答案 0 :(得分:0)

简单的方法是:

将您的表格更改为此

for(i = 0; i&lt; 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是行索引,当你调用document.getLementById(“proctable”)时,rows [e];这将给你完整的一行。

}

- 这是一种简单的方法,如果你想遍历树并获取,你总是有父节点,或者你可以使用jquery $(object).parent()来获取超链接和遍历的父节点。

答案 1 :(得分:0)

你的问题是“将column2的值传递给function 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);                  
   });
}