JavaScript操作表格

最新推荐文章于 2024-08-16 11:39:58 发布

原创最新推荐文章于 2024-08-16 11:39:58 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #table

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格操作方法，包括鼠标悬停、点击时改变背景颜色及表格重置等功能，并通过递归方式确保表格高度一致。这些技巧有助于提升网页交互体验。

// add event to tr var selected_index=[]; function addEvent(table) { selected_index[0] = -1; for ( var i = 0; i < table.rows.length; i++) { // onmouseover event table.rows[i].onmouseover = function() { this.style.backgroundColor = "#E8F2FE"; if (selected_index[0] != -1) { table.rows[selected_index[0]].style.backgroundColor = "#C6D6FD"; } }; // onmouseout event table.rows[i].onmouseout = function() { this.style.backgroundColor = ""; if (selected_index[0] != -1) { table.rows[selected_index[0]].style.backgroundColor = "#C6D6FD"; } }; // onclick event table.rows[i].onclick = function() { if (selected_index[0] != -1) { table.rows[selected_index[0]].style.backgroundColor = ""; } this.style.backgroundColor = "#C6D6FD"; selected_index[0] = this.rowIndex; } } } // reset table function resetTable(table) { var rows = table.rows.length; for ( var i = 0; i < rows; i++) { table.deleteRow(0); } } // fix table function fixTable(table, cols, height) { var rows = table.rows.length; if (table.scrollHeight < height) { table.insertRow(-1); for ( var i = 0; i < cols; i++) { table.rows[rows].insertCell(-1); } fixTable(table, cols, height); } }