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

Picking out specific individual controls out in javascript

本文关键字：单个 控件 javascript 挑选      更新时间：2023-09-26

所以我在这里要做的是复制一个html表的clubmembers。将该表粘贴到两个新位置，在第二个名为tblBody的"新"表上;将其第一行可见性设置为隐藏，将单元格中的文本更改为"(无)"，并使其高度= 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)
}

也许你的问题将是固定的改变你的行:

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);
相关文章：