时间戳

首页 > 解决方案 > 在 Qualtrics 中创建固定表

javascript - 在 Qualtrics 中创建固定表

问题描述

基本上，我想在 Qualtrics 中创建一个表格（调查说明的一部分），该表格将保持固定在页面上并随着参与者在页面上向下移动一系列问题而滚动（是的，我是由于表格/说明的性质以及问题的格式，无法重复标题）。我找到了这个 JavaScript 代码：

var box = document.createElement('div');
box.style.position = 'fixed';
box.style.top = '100px';
box.style.right = '10px';
box.style.width = '200px';
box.style.height = '100px';
box.style.color = 'black';
box.style.background = 'lightblue';
box.style.padding = '20px';
box.innerText = 'Hello world';
document.body.appendChild(box);

这完全可以正常工作。但我需要获取此代码并将其应用于如下所示的表：

此处显示的 2x2 表格

我需要这个没有空的中间单元格，这主要是为了帮助它保持居中，但固定它也可以做到这一点。但是，我对 JavaScript 的了解有限。

标签： javascripthtml-tablesurveyqualtrics

解决方案

解决方案

  • 解决方案已在问题帖中指定，唯一缺少的部分是将“Hello world”纯文本替换为适合呈现表格的 HTML 标记。
  • 缺失的部分可以通过在 HTML 中插入一个不显示的 HTML 表格来完成，然后提取该区域的 OuterHTML 并对属性执行 string.replace 以将display:none;其更改为display:inline;

例子

附加 HTML

  • 不同于 OP 2x2 示例的通用 html 表，根据需要进行修改
  <table id="uu838localtable1596993593" style="display:none;">
    <tr><th>标签</th><th>值</th></tr>
    <tr><td>fname</td><td>和默</td></tr>
    <tr><td>lname</td><td>Huimpson</td></tr>
    <tr><td>年龄</td><td>33</td></tr>
  </table>

修改后的 Javascript

      var box = document.createElement('div');
      box.style.position = '固定';
      box.style.top = '10px';
      box.style.right = '10px';
      box.style.width = '500px';
      box.style.height = '200px';
      box.style.color = '黑色';
      box.style.border = '2px 实心#0e0e0e';
      box.style.background = '淡蓝色';
      box.style.padding = '20px';
      boxContent = (document.getElementById("uu838localtable1596993593").outerHTML);
      boxContent = boxContent.replace("display:none", "display:inline");
      box.innerHTML = 盒子内容；
      document.body.appendChild(box);

推荐阅读