效果圖：
js，代碼如下
/*
tpl數組為新增一行所給的默認值，沒有的話為空''
*/
var tpl = ['one', 'two', 'three'], data = [ ['', 'Kia', 'Nissan', 'Toyota', 'Honda'], ['2008', 10, 11, 12, 13], ['2009', 20, 11, 14, 13], ['2009', 30, 15, 12, 13] ], container = document.getElementById('example1'), hot1; /*
*函數isEmptyRow為判斷當前的行所述列是否為空，是返回true，
*/ function isEmptyRow(instance, row) { var rowData = instance.getData()[row]; for (var i = 0, ilen = rowData.length; i < ilen; i++) { if (rowData[i] !== null) { return false; } } return true; } /*
*函數 defaultValueRenderer 給當前行的列添加默認值
*/ function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {
/*
* args 為獲取當前列的屬性
*/ var args = arguments; /*
*判斷arg[5]的值是否為null，和空值(isEmptyRow，前面已經有相關函數做判斷)
*符合條件的列賦值前面所給的數組的當前列的值tpl[col]
*/ if (args[5] === null && isEmptyRow(instance, row)) { args[5] = tpl[col]; td.style.color = '#999'; } else { td.style.color = ''; }
/*
*判斷arg[5]的值是否為undefined ，和空值(isEmptyRow，前面已經有相關函數做判斷)
*符合條件的列賦值前面所給的數組的當前列的值tpl[col]
*/
if (args[5] === undefined && isEmptyRow(instance, row)) {
args[5] = tpl[col];
td.style.color = '#999';
}
else {
td.style.color = '';
} Handsontable.renderers.TextRenderer.apply(this, args); } hot1 = new Handsontable(container, { startRows: 8, startCols: 5, minSpareRows: 1, contextMenu: true,
/*
*獲取行的屬性，執行defaultValueRenderer函數進行賦值
*/ cells: function (row, col, prop) { var cellProperties = {}; cellProperties.renderer = defaultValueRenderer; return cellProperties; },
/*
*對當前table做操作前執行的函數，做相應的操作，這個我也沒怎么看懂
*/ beforeChange: function (changes) { var instance = hot1, ilen = changes.length, clen = instance.colCount, rowColumnSeen = {}, rowsToFill = {}, i, c; for (i = 0; i < ilen; i++) { // if oldVal is empty if (changes[i][2] === null && changes[i][3] !== null) { if (isEmptyRow(instance, changes[i][0])) { // add this row/col combination to cache so it will not be overwritten by template rowColumnSeen[changes[i][0] + '/' + changes[i][1]] = true; rowsToFill[changes[i][0]] = true; } } } for (var r in rowsToFill) { if (rowsToFill.hasOwnProperty(r)) { for (c = 0; c < clen; c++) { // if it is not provided by user in this change set, take value from template if (!rowColumnSeen[r + '/' + c]) { changes.push([r, c, null, tpl[c]]); } } } } } }); hot1.loadData(data);