在 Jquery 的 quickbase 脚本中需要帮助

Question

我主要使用 quickbase，我试图在不使用 API 调用的情况下创建图表。

this is a working version of my code without any tags between the two tables but between the tables could have many many tags between them IF they even exist this 是结果。

(function() {

  setTimeout(function() {

    $("#mydivTable").each(function() {

      var Rec = $('#mydivTable').attr('data');

      console.log(Rec);

      var valueArray = Array(5).fill(Rec).map(function(n, i) {

        return $('#Row' + n + '-' + i).attr('data');

      });

      var content = "";

      content += "div.div-table { display: table; width: auto; background-color: #eee;  width: 350px;} \n";

      content += "div.div-table2 { display: table; width: auto; width: 300;} \n";

      content += "div.div-table-row { display: table-row; width: auto; clear: both;} \n";

      content += "div.div-table-lcol { float: left; display: table-column; width: 50px;} \n";

      content += "div.div-table-rcol { float: left; display: table-column; width: 300px;} \n";

      content += "div.div-table-ircol { float: left; display: table-column; width: auto;} \n";

      content += "div.div-table-0lcol { float: left; display: table-column; background-color:#0099CC;}\n";

      var maxW = 300;

      var maxV = Math.max(...valueArray);

      var ratio = (maxW / maxV);

      var wratio = ratio.toFixed(2);

      for (var i = 0; i < valueArray.length; i++) {

        var tratio = valueArray[i] * wratio;

        tratio == tratio.toFixed(0);

        if (tratio <= 20) {
          tratio = 20;
        }

        content +=

          "\n #Row" + Rec + "-" + i + "{width:" + tratio + "px; color: #FFF; text-align: center;} ";

      }

      console.log(content);

      $('head').append('<style type="text/css" ID=' + Rec + '>' + content + '</style>');

    });

  }, 600);

})();

我已经添加了一些绒毛来尝试多次制作脚本运行但即使我这样做了，它也只使用了图像中看到的第一组数据。使此脚本转到下一个 table（如果有）并获取新值的最佳方法是什么。

--- 这将是我在 quickbase 字段中输入的文字输入，aiol 和 iol 是对脚本的调用

"<div class='div-table' id='mydivTable' style='width: 355px;' data='"&[Record ID#]&"'>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Apples</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-0' data='"&[Apples]&"'>"&[Apples]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"& " </div>"& " </div>"& " </div>"& " </div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Oranges</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-1' data='"&[Oranges]&"'>"&[Oranges]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"& " </div>"& " </div>"& " </div>"& " </div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Peaches</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-2' data='"&[Peaches]&"'>"&[Peaches]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Bananas</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-3' data='"&[Bananas]&"'>"&[Bananas]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"& "
  <div class='div-table-row'>"& "
    <div class='div-table-lcol'>Pears</div>"& "
    <div class='div-table-rcol'>"& "
      <div class='div-table2'>"& "
        <div class='div-table-row'>"& "
          <div class='div-table-0lcol' id='Row"&[Record ID#]&"-4' data='"&[Pears]&"'>"&[Pears]&"</div>"& "
          <div class='div-table-ircol'>"& " </div>"&"</div>"&"</div>"&"</div>"&"</div>"&"</div>"&[aiol]&[Record ID#]&[/aiol]&"chart1.js"&[/iol]

Answer 1

我认为您在这里遇到的主要问题是重复的 id 值。报告中的每条记录都有一个 DIV 和 id='mydivTable'。 id 值不应在文档中重复，这样做会导致意外行为。在这种情况下，您在脚本中的 $('#mydivTable') 调用仅 returning 第一个元素。幸运的是，这似乎是一个相对容易的修复。

首先，更改 forcedgraph 字段公式中的第一行，以便为 DIV 提供一个 class 名称 "mydivTable" 而不是 ID：

"<div class='div-table mydivTable' style='width: 355px;' data='"

现在您可以查询 'mydivTable' 作为 class 的所有元素。更改您的脚本文件，以便您正在寻找 classes 而不是 ids:

  $(".mydivTable").each(function() {
      var Rec = $(this).attr('data');

将 "#mydivTable" 更改为 this 可确保为 .each() 迭代到 [=20= 的特定元素分配 'data' 属性的值].既然我们已经更改了您的字段，使用 "#mydivtable" 将 return 什么都没有，而使用 ".mydivTable" 将 return 元素的集合，而不仅仅是一个元素。

它应该在这些更改后开始工作。至少它在我自己的模型中对我有用。

在 Jquery 的 quickbase 脚本中需要帮助

Need assistance in my script in quickbase for Jquery

html

javascript

arrays

jquery

quickbase