javascript - Unable to apply style to my grid after creating a div using javascript

Question

I am using the following grid. If you click on any of the cell of Link column, a new grid below will be generated.

And whenever I try to add css style using the following line in the code document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px"; below, it keeps on throwing error ("Uncaught TypeError: Cannot read property 'style' of null). However, if you comment it out, it works fine. I am basically trying to add more space between the first grid and the newly created grid which gets created everytime I click on any of the cell value of Link column.

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

标签： javascriptjqueryhtmlcss

Answer 1

You are searching for an element with id commonWindow in document before putting it there. It's not there yet so you are getting null.

Also when you already have reference to the element in the variable elem, you can set style directly to it. You don't need to search document for it.

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