jQWidgets jqxDataTable altRows Property
Last Updated :
07 Oct, 2021
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used for reading and displaying the data from the HTML Table. This is also used to display data from various data sources like XML, JSON, Array, CSV, or TSV.
The altRows property is used to set or get whether the specified jqxDataTable automatically alternates the row colors or not. Its possible value is "true" and "false". If its value is true, then it will automatically alternate the row color else all the rows will have the same color.
Syntax:
For setting the altRows property:
$('#dataTable').jqxDataTable({altRows: true});
For getting the altRows property:
var altRows = $('#dataTable').jqxDataTable('altRows');
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatatable.js"></script>
Example: The below example illustrates the jQWidgets altRows property. In the below example, the value for altRows property has been set to "true".
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css"
type="text/css"/>
<script type="text/javascript"
src="scripts/jquery.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdata.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxscrollbar.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxlistbox.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdropdownlist.js">
</script>
<script type="text/javascript"
src="jqwidgets/jqxdatatable.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxDataTable altRows Property
</h3>
<div id="#Data_Table"></div>
<input type="button" style="margin: 29px;"
id="jqxbutton_for_altRows"
value="Invoke the altRows Property"/>
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#Data_Table").jqxDataTable({
sortable: true,
altRows: true,
columns: [{
text: 'Employee_Name',
dataField: 'Employee_Name',
width: 190
}, {
text: 'Company',
dataField: 'Company',
width: 160
}, {
text: 'Designation',
dataField: 'Designation',
width: 190
}]
});
$("#jqxbutton_for_altRows").jqxButton({
width: 250
});
$('#jqxbutton_for_altRows').
click(function () {
var altRows = $('#Data_Table').
jqxDataTable('altRows');
$("#log").html(JSON.stringify(
altRows))
});
});
</script>
<table id="Data_Table" border="1"
cellpadding="15"
cellspacing="15">
<thead>
<tr>
<th>Employee_Name</th>
<th>Company</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rohit</td>
<td>GeeksforGeeks</td>
<td>HR</td>
</tr>
<tr>
<td>Rahul</td>
<td>Capgemini</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Vivek</td>
<td>CESC</td>
<td>Electrical Engineer</td>
</tr>
<tr>
<td>Amit</td>
<td>Apple</td>
<td>Manager</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm
Similar Reads
jQWidgets jqxDataTable initRowDetails Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used to read and display the HTML Table data. This is also used to display data from various da
4 min read
jQWidgets jqxDataTable columns Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used for reading and displaying the data from the HTML Table. This is also used to display data
3 min read
jQWidgets jqxDataTable editable Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used for reading and displaying the data from the HTML Table. This is also used to display data
2 min read
jQWidgets jqxGrid altrows Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxGrid is used to illustrate a jQuery widget that shows data in tabular form. Moreover, it renders full suppor
2 min read
jQWidgets jqxDataTable enableHover Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used for reading and displaying the data from the HTML Table. This is also used to display data
2 min read
jQWidgets jqxTreeGrid altRows Property jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTreeGrid is used for representing data in a tree-like structure. This widget is useful for displaying multi-
3 min read