代码超出网站内容的页脚

时间：2018-10-10 20:01:12

标签： javascript jquery html css

我有以下代码片段，如下所示效果很好。基本上，当您单击第一个表时，您将在下面看到另一个，然后单击第二个表，您将在下面看到另一个，依此类推。

<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>
div

但是当我在下面的代码片段中插入相同的代码时。第一个表格/表格显示在正确的位置。但是，当我单击第一个网格时，第二个网格显示在页脚下方。谁能解释一下为什么它会低于页脚？

我在下面的代码中按如下方式放置了<div class="card"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <div class = "wrapper"> <div id="main_downloader_grid" style="margin:50px 10px 20px 100px"></div> <div class ="clickable" style="margin:100px 10px 20px 20px;"></div> </div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> ：

<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> -->
 <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<!-- <script src="jquery-3.3.1.min.js"></script> -->
<!-- <script src="jqwidgets/jqx-all.js"></script> -->
 <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    padding: 30px;
    text-align: center;
    background: white;
}

.header h1 {
    font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h1>Data Downloader</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <div class = "wrapper">
        <div id="main_downloader_grid" style="margin:50px 10px 20px 100px"></div>
        <div class ="clickable" style="margin:100px 10px 20px 20px;"></div>
      </div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

<script type="text/javascript">
     (function () {

      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
      }

    ]
  });

 document.body.appendChild(elem);
  // elem.id.style = "margin:50px 10px 20px 30px";
  elem.style.margin = "50px 10px 20px 50px";

$("#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 }

    ]
  });

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

  if (e.type == 'rowselect') {
     $('.clickable').next('#testbutton').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');
}


});










})()
</script>

</body>
</html>

为了进行测试，可以将以下代码复制并在本地运行。 

Item

2 个答案:

答案 0 :(得分：0)

发生这种情况是因为您的document.body.appendChild(elem);处理程序中有$("#main_downloader_grid").on("rowselect"。 appendChild会将您的新表格/表追加到正文的子项上，成为最后一个元素。由于它位于页脚元素之后，因此新的表格/表格将显示在页脚下方。

要解决此问题，您将想找到一种将新表格/表格放置在正确位置的方法。一种可能的方法是使用insertAfter函数。像$(elem).insertAfter('#main_downloader_grid');

答案 1 :(得分：0)

由于您正在使用document.body.appendChild()添加新元素，因此表已添加到页脚下方。根据{{​​3}}文档，这只是要找到所提供节点的末尾（在这种情况下为body），然后在其中附加新元素。

要显示在被单击元素的下方，您需要修改代码以将子元素附加到被单击元素的父节点。

相关问题
最新问题