小编wil*_*nka的帖子

在HTML 4之前,可以使用在不同窗格中加载不同HTML文件的框架来创建布局.

我想要做的是获得类似的结果,但加载并在屏幕上显示同一文档的两个不同部分.

我理想的范例是MS Word,它允许将窗口分成2个水平部分,以显示同一文档的每个不同部分(在比较文档的不同部分或将部件从一个远端移动到另一个时非常有用文档)或MS Excel(甚至LibreOffice或OpenOffice Calc具有类似的功能),允许在2个(甚至4个)部分中分割工作表的窗格,原因相同或者在顶部或某些列上保持可见的某些行右边(例如行或列标题).

如下图所示:

红色箭头表示将窗口文档分成两部分的装订线,允许分别滚动每个部分,如您所见,查看上部窗格中的行数为3,底部窗格为21.排水沟也是可调整大小的.

是否可以使用带有HTML和CSS的vanilla JS(没有jQuery或其他框架)来做到这一点？

约束:

1. 所有2个窗格(顶部和底部)的文档必须相同(旧框架集需要加载两个不同的文档或两次相同的文档:我已经使用了这个但是如果可能的话我想要一个更干净的方法!)
2. 分离器(排水沟？)必须可调整大小
3. 文档的两个不同部分完全同步,因为如果我contenteditable在顶部(或底部)窗格中修改某些内容(使用属性),则底部(或顶部)窗格会立即显示编辑,MS Word也是如此或Excel ...所以,如果我删除任何底部窗格表格单元格中的内容,即使顶部内容也相应调整(甚至列大小),如MS Word,Excel,Calc等所发生的那样.
4. 单击特定按钮将打开和关闭拆分视图
5. 我不关心旧的浏览器,只关注ECMA脚本2015或更新的浏览器
6. HTML文件有许多事件监听器,它们使用addEventListener()Method 附加到各种HTML元素,如按钮,文本框,复选框,选择框等:这意味着应答解决方案必须能够保持它们完整并在两个窗格中工作.

我在哪里用它？

我在本地HTML文件(没有涉及Web服务器)中有一堆表来加载来自csv文件或浏览器会话存储的数据,我经常需要比较来自不同点的数据或保持标题位于顶部而滚动特定表的其余部分或插入新数据或更新其中一个旧数据以连续查看我正在插入或更新数据的表格单元格.

情况:

目前我正在使用以下代码:

function splitView()
{
    var tgtSrc = location.href;
    var frameset =  '<frameset rows="*,*">' +
                        '<frame name="' + upFrame + '" src="' + tgtSrc + '">' +
                        '<frame name="' + dwFrame + '" src="' + tgtSrc + '">' +
                    '</frameset>';
    document.write(frameset);   
}

上面的函数将当前窗口窗格水平分割为两个帧,称为upFrame和dwFrame(这是两个变量).在分割之后,将可调整大小的沟槽放置在两个框架之间.

加上同步文档数据的两个实例的算法:它通过在一帧中将每个数据编辑保存到该帧的会话存储中并将相同的数据重新加载到另一帧中来工作.

它有点工作,但框架不是要走的路,我想摆脱两次加载文件的需要并同步每个实例所涉及的所有相对缺点.所以不幸的是,这不是我正在寻找的最终答案,因为它有一些缺点:

1. 现代HTML5兼容文件不支持框架和框架集标记,即使它们仍受浏览器支持
2. 该文件必须加载两次(每帧一次),这意味着明显缺乏性能,并且难以实时同步一帧中与另一帧的任何编辑(可能需要双向同步,因此可以在所示部分中完成编辑该文件).不幸的是,即使所需的同步过程也意味着失去了在每个同步循环中锁定UI的性能
3. 同步过程不是实时的,它有一些延迟(几秒钟):如果我把它缩短,我有很大的缺乏性能,包括浏览器冻结

因此,我愿意用更清洁,更有效的解决方案来获得更好的答案.(我甚至建议Chrome开发人员在浏览器中实现它的功能,因为我真的认为这是一个必备功能,特别是考虑到不断扩展的在线数据管理系统.) …

我创建了以下js函数

function csvDecode(csvRecordsList)
{
    var cel;
    var chk;
    var chkACB;
    var chkAF;
    var chkAMR;
    var chkAN;
    var csvField;
    var csvFieldLen;
    var csvFieldsList;
    var csvRow;
    var csvRowLen = csvRecordsList.length;
    var frag = document.createDocumentFragment();
    var injectFragInTbody = function () {tblbody.replaceChild(frag, tblbody.firstElementChild);};
    var isFirstRec;
    var len;
    var newEmbtyRow;
    var objCells;
    var parReEx = new RegExp(myCsvParag, 'ig');
    var tblbody;
    var tblCount = 0;
    var tgtTblBodyID;

    for (csvRow = 0; csvRow < csvRowLen; csvRow++)
    {
        if (csvRecordsList[csvRow].startsWith(myTBodySep))
        {
            if (frag.childElementCount > 0)
            {
                injectFragInTbody();
            } …

我想得到一个非常长的html表(随机长度)的整列的所有innerText.我正在使用此代码:

var tbEls = document.querySelectorAll('#tBodyID tr td:nth-child(cidx)');

其中cidx =列索引我想从中提取内容.

但是这样的代码提取了所有的td元素(当然在其中包含innerText).但它并没有直接提取其中的所有innerText.因此我必须使用for循环重新处理返回的tdEls数组,以从每个tbEls [i]元素中提取其自己的innerText.它有效但......

我的问题是:

在纯JS(没有外部库或框架)中,可以使用更直接的方法改进某种方式,只有 querySelectorAll参数一次性('#tBodyID tr td:nth-child(cidx)')直接获取所有td元素innerText并且只需一个javascript语句而无需重新处理带有for循环或其他任何东西的返回数组？

换句话说,是否有某种innerText选择器可以用来一次性获取它们而不需要任何额外的循环？

如果老浏览器无法识别它就没问题,我很抱歉.

我希望实现的是:

var arrTblColInnerText = document.querySelectorAll('#tBodyID tr td:nth-child(cidx):alltd:innerText');

我想得到一个类似于的数组:

0: value from column cidx cell 0
1: value from column cidx cell 1
2: value from column cidx cell 2
3: value from column cidx cell 3
...
n: value from column cidx cell n

提前致谢.

我有一个包含 10 列的表，我想通过使用特定addEventListener语句将一个或多个事件侦听器添加到第 5 列到第 8 列（因此请不要使用诸如 之类的内联事件element.onclick）。该表是动态的，事实上，我在编程时不知道该表在运行时将有多少条记录，因为它只会在那一刻填充数据。

我已经知道如何“瞄准”表格或表格行或指定的表格单元格以向其添加事件侦听器，但不幸的是我不明白如何将它们一次添加到某些列或一系列列（“一次”是指一个 for 循环，循环遍历每一行以获得每行所需的单元格）。

编辑

该表只是一个普通的表，如下例所示，它是通过从 csv 文件加载数据记录或通过放置在表本身的 tfoot 中的表单添加新记录来填充的。此外，由于 js 在需要时动态添加（或删除）的属性，因此可以将数据编辑到表本身中contenteditable。

如果我想向行添加事件侦听器，我首先获取行对象，然后将事件侦听器添加到其中一次：由于事件传播/委托，所有 td 元素都将根据我的需要受到影响。是否可以对列执行相同的操作？

myRow.addEventListener(input, myfunc, false);

换句话说，是否可以执行以下操作：

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);

myRow.addEventListener(input, myfunc, false);

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);