使用锚元素可单击的表行

时间:2018-06-25 09:44:08

标签: javascript jquery html clickable

我有一个6列的节点表。 在第一列(名为“节点ID”)上,有每个节点的索引号(每个节点在不同的行上)。当我单击特定的索引号时,将打开一个模态窗口,其中包含节点的信息。

创建表时,我已将每个节点id用作锚元素:

 if (key[j] == "nodeid") {
     var cell = document.createElement("td");
     var aux = document.createElement("a");

然后,当单击特定的按钮时,我调用一个从服务器获取节点信息的函数:

 $("a").click(function(test) {
            getEndpoints(test.target.innerHTML);//innerHTML= node id number
        });

我想做的是单击行上的任意位置以打开包含该行上显示的节点信息的模式窗口。

到目前为止,我一直尝试通过重新定义if语句来制作每个<td>和锚元素:

if (key[j]) {
    var cell = document.createElement("td");
    var aux = document.createElement("a");

    cell.appendChild(aux);
    var cellText = document.createTextNode(value[key[j]]);
    aux.appendChild(cellText);
    row.appendChild(cell);

问题是,为了使其正常工作,我总是必须先单击节点索引才能获取信息。如果我首先单击该行上的其他位置,则得到的内容为空白。

///最新编辑
这是我用来获取特定节点数据的getEndpoints函数:

function getEndpoints(nodeid) {
    $.get(".../iot/cmd/node/" + nodeid + "/class/mib/act/allS", function (node) {
        window.data = node;
        var key = ["epid", "clslist", "loc", "type", "zplus"];
        var endpoints = node.endpoints[0];
        for (var k = 0; k < key.length; k++) {
            $("#" + key[k]).text(endpoints[key[k]]);
        }
    });
}

然后我用getEndpoints请求的数据填充此div:

<div id="endDiv" style="display: none">
    <ol class="rounded-list">
        <li><label>ID: <span id="name"></span></label></li>
        <li><label>LOC. NAME: <span id="loc"></span></label></li>
        <li><label>EPID: <span id="epid"></span></label></li>
        <li><label>CLSLIST: <span id="clslist"></span></label></li>
        <li><label>TYPE: <span id="type"></span> </label></li>
        <li><label>ZPLUS: <span id="zplus"></span> </label></li>

    </ol>
</div>

然后我将div内容放在模式窗口中:

 $("a").on( "click", function() {
        $("#endDiv").contents().appendTo(".modal-content")
    });

0 个答案:

没有答案