javascript - 在 javascript 中挑选出特定的单独控件

Question

所以我在这里想做的是从clubMemebers 中复制一个html 表。将该表粘贴到两个新位置，并粘贴到名为 tblBody 的第二个"new"表上；将其第一行可见性设置为隐藏，将单元格中的文本更改为“”(无)并使其高度 = 0px...基本上。

对于大多数人来说，这个问题可能是一个相当明显的问题...它们都链接到一个表，因此对一个表的更改将会对所有表进行更改...

如何分离这些表来完成我需要做的事情？我尝试过搜索，但我想到的只是将表格复制到剪贴板或 Excel。

下面是我正在使用的 html 和 javascript。

<div id="DivHeaderRow"></div>
<div class="gridDiv" id="gridDiv" onscroll="OnScrollDiv(this)"></div>
<div id="DivFooterRow"></div>

<table style="width: 100%;" class="MemberTbl" runat="server" id="clubMembers" >
    <tr class="Header" style="position:fixed;"></tr>
</table>

和 JavaScript:

function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
    var tblHead = document.getElementById(gridId);
    var tblBody = document.getElementById(gridId);
    if (tblHead) {
        var DivHR = document.getElementById('DivHeaderRow');
        var DivMC = document.getElementById('gridDiv');
        var DivFR = document.getElementById('DivFooterRow');

        //*** Set divheaderRow Properties ****
        DivHR.style.height = headerHeight + 'px';
        DivHR.style.position = 'relative';
        DivHR.style.top = '10px';
        DivHR.style.zIndex = '10';
        DivHR.style.verticalAlign = 'top';
        DivHR.style.overflow = 'hidden';

        //*** Set divMainContent Properties ****
        DivMC.style.position = 'relative';
        DivMC.style.zIndex = '1';

        //*** Set divFooterRow Properties ****
        DivFR.style.width = (parseInt(width) - 16) + 'px';
        DivFR.style.position = 'relative';
        DivFR.style.top = -headerHeight + 'px';
        DivFR.style.verticalAlign = 'top';
        DivFR.style.paddingtop = '2px';
        DivFR.style.overflow = 'hidden';

        if (isFooter) {
            var tblfr = tbl.cloneNode(true);
            tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
            var tblBody = document.createElement('tbody');
            tblfr.style.width = '100%';
            tblfr.cellSpacing = "0";
            //*****In the case of Footer Row *******
            tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
            tblfr.appendChild(tblBody);
            DivFR.appendChild(tblfr);
        }
        //****Copy Header in divHeaderRow****
        var tblBodyRow = tblBody.rows[0];
        tblBodyRow.style.visibilty = 'hidden';
        tblBodyRow.style.height = '0px';       

        for(var i = 0, tblBodyRow; tblBodyCell = tblBodyRow.cells[i]; i++)
        {
          tblBodyCell.innerHTML = '';   
        }                

        DivHR.appendChild(tblHead.cloneNode(true));
        DivMC.appendChild(tblBody.cloneNode(true));
    }
}

function OnScrollDiv(Scrollablediv) {
    document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
    document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}

window.onload = function () {
    MakeStaticHeader('clubMembers', 100, 400, 25, false)
}

Answer 1

也许你的问题可以通过改变你的线路来解决:

var tblHead = document.getElementById(gridId);
var tblBody = document.getElementById(gridId);

对于:

var tblHead = document.getElementById(gridId).cloneNode(true);
var tblBody = document.getElementById(gridId).cloneNode(true);

但是，也许您可​​以尝试使用 jquery 来操作 DOM 元素...然后，使用类似的东西就足够了(请参阅 Fiddle ):

tableHtml = $('#clubMembers').html();
$('#DivHeaderRow').html(tableHtml);
$('#DivHeaderRow').find("tr").first().hide();
$('#gridDiv').html(tableHtml);