javascript - 超出网站内容页脚的代码
问题描述
我有以下代码片段，它可以正常工作，如下所示。基本上，当您单击第一个表时，您将在下面看到另一个，然后单击第二个，您将在下面看到另一个，依此类推。
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');
}
});<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>
解决方案
这是因为document.body.appendChild(elem);在您的$("#main_downloader_grid").on("rowselect"处理程序中发生的。appendChild 将您的新网格/表格附加到正文的子项，它成为最后一个元素。由于它位于页脚元素之后，因此新的网格/表格出现在页脚下方。
要解决此问题，您需要找到一种将新网格/表格放置在正确位置的方法。一种可能的方法是使用insertAfter函数。就像是$(elem).insertAfter('#main_downloader_grid');
推荐阅读
- curl - 使用 Twurl 获取一组地理定位的屏幕名称
- x86 - 流水线中的软件中断会发生什么？
- c++ - 如何在 QCollator 不可用的 Qt 4.6.2 中对 QStringList 进行数字排序
- jquery - $.post 对 jax-rs 的调用未接收到 JSON 数据
- c - 这段代码有什么问题或有什么问题（Uri 1049 问题）？
- multithreading - 无法让 PyQt5Designer 液晶盒接收显示信号并更新显示
- ms-access - iif 语句可以产生另一个字段的值吗？
- html - 停止 ng-show 向文本字符串添加空格
- python - 尝试使用 matplotlib、图例中的双条目和没有 y 轴标签来绘制 DataFrame
- javascript - 如何将原型数组转换为 json 字符串