// Build the table
$table = new \OOUI\Tag( 'table' );
+ $table->addClasses( [ 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' ] );
+ $thead = new \OOUI\Tag( 'thead' );
+ $table->appendContent( $thead );
$tr = new \OOUI\Tag( 'tr' );
+
// Build the header
$tr->appendContent( $this->getCellTag( "\u{00A0}" ) );
foreach ( $this->columns as $columnLabel => $columnTag ) {
$this->getCellTag( new \OOUI\HtmlSnippet( $columnLabel ) )
);
}
- $table->appendContent( $tr );
+ $thead->appendContent( $tr );
// Build the options matrix
+ $tbody = new \OOUI\Tag( 'tbody' );
+ $table->appendContent( $tbody );
foreach ( $this->rows as $rowLabel => $rowTag ) {
- $table->appendContent(
+ $tbody->appendContent(
$this->getTableRow( $rowLabel, $rowTag )
);
}
mw.widgets.CheckMatrixWidget = function MWWCheckMatrixWidget( config ) {
var $headRow = $( '<tr>' ),
$table = $( '<table>' ),
+ $thead = $( '<thead>' ),
+ $tbody = $( '<tbody>' ),
widget = this;
config = config || {};
$.each( this.columns, function ( columnLabel ) {
$headRow.append( $( '<td>' ).html( columnLabel ) );
} );
- $table.append( $headRow );
+ $thead.append( $headRow );
// Build table
// eslint-disable-next-line no-restricted-properties
$row.append( $( '<td>' ).append( checkbox.$element ) );
} );
- $table.append( $row );
+ $tbody.append( $row );
} );
+ $table
+ .addClass( 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' )
+ .append( $thead, $tbody );
this.$element
.addClass( 'mw-widget-checkMatrixWidget' )