Question

我有一个CSS新问题。我们仍然使用旧的YUI2来创建表中的子表，如下所示：

当显示子表时，YUI会显示行的高度并添加一个白色div，如您所见。我想为该div添加一些样式（在子表后面）。

我可以通过覆盖类并修改表的功能来为该div分配一个id，以便得到这个：

我真的不想走这条路。我宁愿只用CSS来瞄准div，但是我的缺点已经胜过我了。当我检查div谷歌给我这个：

如何定位突出显示的div？这看起来应该很容易，因为我可以看到div有哪些类但我无法得到它。

修改不确定这是否有帮助但我的javascript使用以下函数来创建子表：

DMAS.deviceconsole.datamonitor.DataMonitorOverviewTable.prototype.secondSubTable = function(state){
    var json = {
        "Fruit":[
            {"name":"apples","type":"fruit", "color":"red"},
            {"name":"broccoli","type":"veg","color":"red"},
            {"name":"cherriess","type":"fruit","color":"red"}
        ]
    };

var dsLocalJSON2 = new YAHOO.util.DataSource(json);
dsLocalJSON2.responseType = YAHOO.util.DataSource.TYPE_JSON;
dsLocalJSON2.responseSchema = {
    resultsList : "Fruit",
    fields : ["name","type","color"]
};
var fruitDT = new REDT(
    state.expLinerEl,
    [
        {key:'name', label:'Name', sortable:true}, 
        {key:'type', label:'Type', sortable:true}, 
        {key:'color', label:'Color', sortable:true}
    ],
    dsLocalJSON2,
    {
        className : "dataMonitorSubtable"
    }
);

// Store the reference to this datatable object for any further use 
// (specially destroying it, as above)
this.setExpansionState(state.record,NESTED_DT,fruitDT);

//Subscribe to the rowExpansionDestroyEvent so I can destroy the tracksDT table
// before its container (the album row) is gone and it ends a zombie
fruitDT.on(this,'rowExpansionDestroyEvent', function (state) {
    state[NESTED_DT].destroy();
});
}

以下是YUI库中的一个片段，它扩展了行

   expandRow : function( recordId ){
        var state = this.getExpansionState( recordId );
        if( !state.expanded){
            this.setExpansionState( recordId, 'expanded', true );
            var expTrEl = state.expTrEl,
                record = state.record,
                trEl = this.getTrEl( record );
            if (expTrEl) {
                Dom.insertAfter(state.expTrEl,this.getTrEl(recordId));
                Dom.setStyle(state.expTrEl,'display','');
            } else {
                expTrEl = document.createElement('tr');
                var expTdEl = document.createElement( 'td' ),
                    expLinerEl = document.createElement( 'div' ),
                    template = this.get(TEMPLATE);
                Dom.addClass(expTrEl, CLASS_EXPANSION);
                expTdEl.colSpan = this.getFirstTrEl().childNodes.length;
                Dom.addClass(expLinerEl, CLASS_LINER);
                expTrEl.appendChild( expTdEl );
                expTdEl.appendChild( expLinerEl);
                this.setExpansionState( recordId, 'expTrEl', expTrEl);
                this.setExpansionState( recordId, 'expLinerEl', expLinerEl);

                // refresh the copy of the expansion state
                state = this.getExpansionState(recordId);
                if( Lang.isString( template ) ){
                    expLinerEl.innerHTML = Lang.substitute( template, record.getData() );
                } else if( Lang.isFunction( template ) ) {
                    template.call(this,  state );
                } else {
                    return false;
                }
            }
            //Insert new row
            Dom.insertAfter( expTrEl, trEl );
            Dom.replaceClass( trEl, CLASS_COLLAPSED, CLASS_EXPANDED );
            /**
             * Fires when a row is expanded
             *
             * @event rowExpandedEvent
             * @param state {Object} see <a href="#method_getExpansionState">getExpansionState</a>
             */
            this.fireEvent( "rowExpandedEvent", state);
            return true;
        }

    },

Answer 1

您可以尝试这样的事情：

div.dataMonitorSubtable.yui-dt {
  background-color: red;
}

无法使用CSS

1 个答案: