簡體   English   中英

如何在javascript生成的表上使用“ rel”屬性?

[英]How can I use a “rel” attribute on a javascript generated table?

好的,所以我很難說出這個問題,所以我會盡力描述這個問題。 我正在將這段代碼轉換為從單擊圖像中彈出一個首選項覆蓋的代碼,然后通過單擊多個表行之一來打開一個覆蓋。

代碼涉及這兩個文件(但是,它們不是項目中唯一的文件。)


index.html

    <div class="details">
        <h3 align="center">Preferences</h3>



    </div>
</div>
        <script>
             /* Overlay  */
             $(document).ready(function() {

             $("tr[rel]").overlay(); 

            });
        </script>

        <!-- <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> -->
        <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
        <script src="js/jquery.qtip.debug.js" type="text/javascript"></script>
        <script>
             /* TOOL TIPS */
        /*   $(document).ready(function() {
                    $(#'milehf').qtip({
                       content: '100%',
                       style: { 
                          width: 200,
                          padding: 5,
                          background: '#A2D959',
                          color: 'black',
                          textAlign: 'center',
                          border: {
                             width: 7,
                             radius: 5,
                             color: '#A2D959'
                          },
                          tip: 'bottomLeft',
                          name: 'dark' // Inherit the rest of the attributes from the preset dark style
                       }
                    });
             });*/
        </script>

table.js

$.ajax({
    async:false,
    dataType: "json",
    url: "http://localhost:8080/JSP/connection2.jsp",
    success: function(data){
        cbspData = data;
        console.log(cbspData[1].Satellite);
        }
    });

function table4()
{
    console.log(cbspData[1].Satellite);
    //alert(data2[1].id);
    var thisDat = cbspData;

    if (!document.getElementsByTagName) return;
    tabBody=document.getElementById("mytable")
    //tabBody=document.getElementsByTagName("TBODY").item(0);

    //var Parent = tabBody.getElementsByTagName("TBODY");
    while(tabBody.hasChildNodes())
    {
       tabBody.removeChild(tabBody.firstChild);
    } 

  $.each(cbspData, function(i,dat){ 
    row=document.createElement("TR");
    row.setAttribute("number", dat.id);
    row.id = "triggers";
    row.rel="#mies1";
    console.log(row.id);
    console.log(row.rel);
    //console.log(dat.Satellite);


    document.createAttribute();

    cell0 = document.createElement("TD");
    cell0.innerHTML = dat.Mission;
    //onMouseOver='alert(\"hello\"); document.getElementById(\"div" + i + "\").style.visibility = \"visible\";'
    cell1 = document.createElement("TD");
    cell1.innerHTML = dat.Satellite;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(0)").html(
    //  dat.id
    //);
    cell2 = document.createElement("TD");
    cell2.innerHTML = dat.TerminalID;
   // $("#test-area table tbody tr:eq(" + i +") td:eq(1)").html(
   //   dat.title
    //);
    cell3 = document.createElement("TD");
    cell3.innerHTML = dat.Modem;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(2)").html(
    //  dat.subtitle
    //);
    cell4 = document.createElement("TD");
    cell4.innerHTML = dat.Teleport;
    //$("#test-area table tbody tr:eq(" + i +") td:eq(3)").html(
    //  dat.ranges
    //);
    cell5 = document.createElement("TD");
    cell5.innerHTML = dat.ModemLock;

    //textnode5=document.createTextNode(dat.measures);
    //cell5.appendChild(textnode5);

    row.appendChild(cell0);
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    tabBody.appendChild(row);
  });

}

即使rel屬性成功設置為“#mies1”,Table.js仍會根據JSP生成的信息生成表,單擊不起作用。 但是,如果我在index.html中設置由純html制成的表的rel,它的效果就很好。 我認為這與頁面完成其加載周期並在完全生成表之前運行覆蓋代碼有關。 這可能與它有關嗎? 如何使生成的TR可點擊?

調用$("tr[rel]").overlay(); 在函數table4()的末尾。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM