javascript - 在一组动态创建的表之间显示多条水平线

Question

我在动态插入水平线时遇到一个问题(即在创建动态表时)。

从下面的代码片段可以看出:

1) 如果你点击第一个表格/网格的任何一行，它下面会显示一条水平线，并显示一个新表格

2) 如果我点击第二个网格/表格的任何一行，一切看起来都很好并且显示一条水平线并显示第三个网格/表格

3) 点击第 3 格，显示第 4 格和一条水平线。但是，当您单击第 4 个网格时，您会注意到在网格上方添加了一条额外的水平线，如屏幕截图所示 (突出显示)如下:

谁能告诉我为什么会这样？

我试图在代码中使用附加变量 hll 来完成此操作。不确定使用 hll 是否多余，或者我可以使用 hl 来达到同样的目的？

var hll = document.createElement('div');
  hll.id = 'newhorizLine';
  hll.style.margin = "25px 0";
  hll.style.height = "1px";
  hll.style.background = "black";
  hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";

请考虑下面的代码片段:

var source = {
  localdata: [
    ["Test1", "2018-08-29 14:19:07", "2020-08-29 14:19:07", "Path1"],
    ["Test2", "2018-09-05 11:26:39", "2020-09-05 11:26:39", "Path2"],
    ["Test3", "2018-08-30 07:32:23", "2020-08-30 07:32:23", "Path3"],
    ["Test4", "2018-09-11 09:01:42", "2020-09-11 09:01:42", "Path4"],
    ["Test5", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path5"],
    ["Test6", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path6"],
    ["Test7", "2018-09-13 07:34:57", "2020-09-13 07:34:57", "Path7"]
  ],
  datafields: [{
      name: 'dataSetName',
      type: 'string',
      map: '0'
    },
    {
      name: 'accessStartDate',
      type: 'date',
      map: '1'
    },
    {
      name: 'accessEndDate',
      type: 'date',
      map: '2'
    },
    {
      name: 'conceptPath',
      type: 'string',
      map: '3'
    }
  ],
  datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function(data) {},
  loadError: function(xhr, status, error) {}
});

$("#main_downloader_grid").jqxGrid({

  source: dataAdapter,
  width: 381,
  height: '200',
  pageable: true,
  sortable: true,
  autoheight: true,
  columnsResize: true,
  theme: 'classic',
  columns: [{
      text: 'Data Set',
      datafield: 'dataSetName',
      width: 140

    },
    {
      text: 'Start Date',
      datafield: 'accessStartDate',
      width: 120,
      cellsformat:'MM/dd/yyyy'
    },
    {
      text: 'End Date',
      datafield: 'accessEndDate',
      width: 120,
      cellsformat:'MM/dd/yyyy'
    },
    {
      text: 'Concept Path',
      datafield: 'conceptPath',
      width: 50,
      hidden: true
    }
  ]

});

// Row Select Logic Starts Here
$("#main_downloader_grid").on("rowselect", function(e) {
  let data_set_name = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'dataSetName');

  console.log("Cell Value Test");
  console.log(data_set_name.value);


  let conceptPath = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'conceptPath');
  console.log("Concept Path Test");
  console.log(conceptPath.value);


  $('#commonWindow').remove();
  //$('.clickable').remove();
  $('.clickable').next('#testbutton').remove();
    $('.clickable').slice(1).remove();


  var elem = document.createElement('div');
  elem.id = 'commonWindow';
  //elem.setAttribute('style', 'margin:500px 10px 20px 20px;');


  console.log(elem);



  let data = [{
      letter: '<b>People</b>'
    },
    {
      letter: '1) Detailed demographics data of all people'
    },
    {
      letter: '2) Attributes associated with all people'
    },
    {
      letter: '<b>Technology</b>'
    },
    {
      letter: '1) Computer details'
    },
    {
      letter: '2) Hardware Details'
    },
    {
      letter: '3) Software Details'
    },
    {
      letter: '<b>Company Details</b>'
    }
    /* {conceptpath: conceptPath.value } */
  ];
  let source = {
    localdata: data,
    datatype: "array",
    datafields: [{
      name: 'letter',
      type: 'string'
    } /* ,{ name: 'conceptpath', type: 'string' } */ ]
  };
  let newDataAdapter = new $.jqx.dataAdapter(source);

  $(elem).jqxGrid({
    source: newDataAdapter,
    width: 395,
    height:310,
    columns: [{
        text: 'Data set <b>' + data_set_name.value + '</b> selected, what data do you want to see?',
        datafield: 'letter'
        //width: 450
      }

    ]
  });
 
 $(elem).insertAfter('#main_downloader_grid');
  elem.style.margin = "50px 10px 20px 50px";
  
  var hl = document.createElement('div');
  hl.id = 'horizLine';
  hl.style.margin = "25px 0";
  hl.style.height = "1px";
  hl.style.background = "black";
  hl.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
  $(hl).insertAfter('#main_downloader_grid');
  
  
  var hll = document.createElement('div');
  hll.id = 'newhorizLine';
  hll.style.margin = "25px 0";
  hll.style.height = "1px";
  hll.style.background = "black";
  hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
  
  

$("#commonWindow").on("rowselect", handleClick);



function handleClick(e) {
  var $el = $("<div />", {
    class: "clickable",
    style: "margin:100px 10px 20px 20px ",
  })
  .on('click', handleClick)

  $el.jqxGrid({
    height: 270,width:520, pageable: true,source: dataAdapter, columns: [
      { text: 'Data Set Name', datafield: 'dataSetName', width: 200 },
      { text: 'Access Start Date', datafield: 'accessStartDate', width: 150,cellsformat:'MM/dd/yyyy' },
      { text: 'Access End Date', datafield: 'accessEndDate', width: 150,cellsformat:'MM/dd/yyyy' },
      { text: 'Concept Path', datafield: 'conceptPath', width: 100,hidden:true }
     
    ]
  });
  
 $(hll).insertAfter(".clickable");

  var $this = $(this), $parent = $(this).parent();

  if (e.type == 'rowselect') {
     $('.clickable').next('#testbutton').remove();
     $('.clickable').next('#newhorizline').remove();
     $('.clickable').slice(1).remove();
  }

  var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
       $(".clickable").jqxGrid('exportdata', 'csv', 'jqxGrid');
  });
  
 
  console.log($button);

  
  $button.jqxButton({ width: 100, height: 20});
    $button.html('Download Data');

  $el.after($button);

    $parent.append($el);
  $(this).off('click');
}


});

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
  <div id="main_downloader_grid" style="margin:50px 10px 20px 50px"></div>
  <div class="clickable" style="margin:50px 10px 20px 20px;"></div>
</div>

Answer 1

虽然我不确定您要完成什么，但您可以使用 html 中的

---

标签在没有 css 的情况下获得水平线!

<h2>Hello!</h2>
<hr>
<h3>Hi, Tim!</h3>