我正在使用以下网格。如果单击Link列的任何单元格，将在下方生成一个新网格。
每当我尝试使用下面代码document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";中的以下行添加 css 样式时，它都会不断抛出错误 ( "Uncaught TypeError: Cannot read property 'style' of null)。但是，如果您将其注释掉，它就可以正常工作。我基本上是想在第一个网格和新创建的网格之间添加更多空间，每次单击链接列的任何单元格值时都会创建该网格。
// prepare the data
var url = "https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/feed.xml";
var source =
{
datatype: "xml",
datafields: [
{ name: 'title', type: 'string' },
{ name: 'link', type: 'string' },
{ name: 'pubDate', type: 'date' },
{ name: 'creator', map: 'dc\\:creator', type: 'string' },
],
root: "channel",
record: "item",
url: url
};
var linkrenderer = function (row, column, value) {
if (value.indexOf('#') != -1) {
value = value.substring(0, value.indexOf('#'));
}
var format = { target: '"_blank"' };
var html = $.jqx.dataFormat.formatlink(value, format);
//console.log(html)
return html;
}
var dataAdapter = new $.jqx.dataAdapter(source);
var cellsrenderer = function (row, column, value) {
var currentRowData = $("#jqxgrid").jqxGrid('getrowdata', row);
var rowDataLink = currentRowData["link"];
return "<a href =" + rowDataLink + ">" + value + "</a>";
};
// Create jqxGrid.
$("#jqxgrid").jqxGrid({
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
columns: [
{ text: 'Link', datafield: 'link', width: 550},
{ text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
{ text: 'Creator', datafield: 'creator', width: 200 }
]
});
$("#jqxgrid").on("rowselect", function (e) {
let link = $("#jqxgrid").jqxGrid('getcell', e.args.rowindex, 'link');
console.log(link.value);
$('#commonWindow').remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";
$(elem).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 550 },
{ text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
{ text: 'Creator', datafield: 'creator', width: 200 }
] });
document.body.appendChild(elem);
});<div id="jqxgrid">
</div>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>当您的代码遇到以下行时：
document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";
...您实际上还没有将元素附加到 DOM，因此当您使用document.getElementById.
您实际将元素添加到 DOM 的位置在后面：
document.body.appendChild(elem);
相反，您应该直接使用 引用元素elem，就像您在代码中的其他地方所做的那样，如下所示：
elem.style.padding = "50px 10px 20px 30px";
尽管如此，将填充规则作为静态样式包含在您的 CSS 中而不是像这样将其添加到您的 JavaScript 中可能是最有意义的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句