Question

我正在使用以下网格。如果单击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>

Answer 1

您要先在文档中搜索ID为commonWindow的元素，然后再将其放置在该元素中。还不存在，所以您会得到null。

此外，如果已经在变量elem中引用了该元素，则可以直接为其设置样式。您无需搜索文档。

$("#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.body.appendChild(elem);
    elem.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 }
        ]
    });
});

Answer 2

在您的代码到达以下行时：

document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";

...您实际上尚未将元素附加到DOM，因此，当您使用document.getElementById来请求元素时，DOM找不到元素。

将元素实际添加到DOM的位置稍后出现：

document.body.appendChild(elem);

相反，您应该直接使用elem来引用元素，就像在代码的其他地方一样，

elem.style.padding = "50px 10px 20px 30px";

无论如何，将填充规则作为静态样式包括在CSS中而不是像这样将其添加到JavaScript可能是最有意义的。

使用javascript创建div后无法将样式应用于网格

2 个答案: