jQuery Table Generation Plugin Table.js

Add-ons

2026-07-26 03:34 5 次浏览 • 0 次下载 1.6KB

Plugin Description: Easily generate tables and customize their styles using an option configuration object.

This resource includes the API for this class. You only need a few simple methods to generate an attractive table.

Steps to create a table:

1. The HTML page must provide a DIV with an ID attribute: <div id="table"></div>

2. Generate a table inside this DIV:

Table().init({
    id:'table',
    header:['id','Name','Age'],
    data:[
        [1,'Wang',22],
        [2,'Li',24],
        [3,'Zheng',19]
    ]
});

The above three

configuration properties are required. You can also use other configuration properties to customize the table to your liking: title, titleSize, titleColor,color, size, align, headerSize, headerBgColor, headerColor, and other properties

API:

init(option):
// Generate a table inside the specified DIV.
option // A configuration object with the following property list:
id:// The ID of the DIV to be used as the table container.
header:// An array containing the table header labels, such as: ['ID','Name','Age','Gender','Hobbies']
data:// A two-dimensional array containing the table data, such as:
[
  [1,'Zhang San',24,'Male','Hiking'],
  [2,'Li Si',22,'Male','Drawing'],
  [3,'Wang Wu',43,'Male','Watching TV'],
  [4,'Zhao Liu',37,'Male','Coding'],
  [5,'Xiao Yu',19,'Female','Reading']
]
title:// Table title (optional; hidden by default)
titleColor:// Title color (optional; defaults to black)
titleSize:// Title font size (optional; defaults to 16px)
headerColor:// Header text color (optional; defaults to black)
headerSize:// Header font size (optional; defaults to 16px)
headerBgColor:// Header background color (optional)
color:// Table text color (optional; defaults to black)
size:// Table font size (optional; defaults to 16px)
rowHeight:// Height of each table row (optional)
columnWidth:// A numeric array in which each number represents the width percentage of a table column (optional)
evenBgColor:// Background color for rows with even indexes (optional)
oddBgColor:// Background color for rows with odd indexes (optional)
align:// Table alignment (optional; can only be one of 'center', 'left', or 'right')
getValue(id,row,column)：// Get the data from the specified row and column of the table.
setValue(id,row,column,value)：// Set the data in the specified row and column of the table.
getValues(id)：// Get the data from the specified table and return it as a two-dimensional array.
addRow(id,data)：// Add a new row of data to the specified table. data is an array containing one row of data.
deleteRow(id,row)：// Delete the data in row from the specified table.
getRowCount(id)：// Get the number of records in the specified table.
render(id):// Redraw the table.