需要在我的脚本中为Jquery

时间:2016-06-30 02:20:21

标签: javascript jquery html arrays quickbase

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

this是我的代码的工作版本,两个表之间没有任何标记,但如果它们存在this之间,那么表之间可能有许多标记http://en.cppreference.com/w/cpp/atomic/atomic

(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);

})();

我添加了一些绒毛尝试让脚本运行多次,但即使我这样做,它只使用了图像中看到的第一组数据。如果这个脚本有一个并获得新值,那么最好的方法是使这个脚本转到下一个表。

---这将是我在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]

1 个答案:

答案 0 :(得分:0)

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

首先,更改forcedgraph字段公式中的第一行,以便为DIV提供类名“mydivTable”而不是id:

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

现在,您可以查询将“mydivTable”作为类的所有元素。更改脚本文件,以便您查找类而不是ID:

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

"#mydivTable"更改为this可确保您为.each()正在迭代到Rec的特定元素分配'data'属性的值。由于我们已经更改了您的字段,因此使用"#mydivtable"将不返回任何内容,并且使用".mydivTable"将返回元素集合而不是仅返回一个元素。

它应该在这些变化之后开始工作。至少它在我自己的模拟中为我做了。