这里是包含HTML、CSS和JS的完整代码。
<style><style id='generate-style-inline-css' type='text/css'>
body {
background-color: #efefef;
color: #3a3a3a;
}
a,
a:visited {
color: #1e73be;
}
a:hover,
a:focus,
a:active {
color: #000000;
}
body .grid-container {
max-width: 1200px;
}
body,
button,
input,
select,
textarea {
font-family: "Open Sans", sans-serif;
}
.entry-content>[class*="wp-block-"]:not(:last-child) {
margin-bottom: 1.5em;
}
.main-navigation .main-nav ul ul li a {
font-size: 14px;
}
@media (max-width:768px) {
.main-title {
font-size: 30px;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
}
.top-bar {
background-color: #636363;
color: #ffffff;
}
.top-bar a,
.top-bar a:visited {
color: #ffffff;
}
.top-bar a:hover {
color: #303030;
}
.site-header {
background-color: #ffffff;
color: #3a3a3a;
}
.site-header a,
.site-header a:visited {
color: #3a3a3a;
}
.main-title a,
.main-title a:hover,
.main-title a:visited {
color: #222222;
}
.site-description {
color: #757575;
}
.main-navigation,
.main-navigation ul ul {
background-color: #222222;
}
.main-navigation .main-nav ul li a,
.menu-toggle {
color: #ffffff;
}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li:focus>a,
.main-navigation .main-nav ul li.sfHover>a {
color: #ffffff;
background-color: #3f3f3f;
}
button.menu-toggle:hover,
button.menu-toggle:focus,
.main-navigation .mobile-bar-items a,
.main-navigation .mobile-bar-items a:hover,
.main-navigation .mobile-bar-items a:focus {
color: #ffffff;
}
.main-navigation .main-nav ul li[class*="current-menu-"]>a {
color: #ffffff;
background-color: #3f3f3f;
}
.main-navigation .main-nav ul li[class*="current-menu-"]>a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] .sfHover>a {
color: #ffffff;
background-color: #3f3f3f;
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active {
color: #3f3f3f;
background-color: #3f3f3f;
}
.navigation-search input[type="search"]:focus {
color: #ffffff;
background-color: #3f3f3f;
}
.main-navigation ul ul {
background-color: #3f3f3f;
}
.main-navigation .main-nav ul ul li a {
color: #ffffff;
}
.main-navigation .main-nav ul ul li:hover>a,
.main-navigation .main-nav ul ul li:focus>a,
.main-navigation .main-nav ul ul li.sfHover>a {
color: #ffffff;
background-color: #4f4f4f;
}
.main-navigation . main-nav ul ul li[class*="current-menu-"]>a {
color: #ffffff;
background-color: #4f4f4f;
}
.main-navigation .main-nav ul ul li[class*="current-menu-"]>a:hover,
.main-navigation .main-nav ul ul li[class*="current-menu-"] .sfHover>a {
color: #ffffff;
background-color: #4f4f4f;
}
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
background-color: #ffffff;
}
.entry-meta {
color: #595959;
}
.entry-meta a,
.entry-meta a:visited {
color: #595959;
}
.entry-meta a:hover {
color: #1e73be;
}
.sidebar .widget {
background-color: #ffffff;
}
.sidebar .widget .widget-title {
color: #000000;
}
.footer-widgets {
background-color: #ffffff;
}
.footer-widgets .widget-title {
color: #000000;
}
.site-info {
color: #ffffff;
background-color: #222222;
}
.site-info a,
.site-info a:visited {
color: #ffffff;
}
.site-info a:hover {
color: #606060;
}
.footer-bar .widget_nav_menu .current-menu-item a {
color: #606060;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
color: #666666;
background-color: #fafafa;
border-color: #cccccc;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
color: #666666;
background-color: #ffffff;
border-color: #bfbfbf;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
color: #ffffff;
background-color: #666666;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
color: #ffffff;
background-color: #3f3f3f;
}
.generate-back-to-top,
.generate-back-to-top:visited {
background-color: rgba( 0, 0, 0, 0.4);
color: #ffffff;
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
background-color: rgba( 0, 0, 0, 0.6);
color: #ffffff;
}
.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
margin-left: -40px;
width: calc(100% + 80px);
max-width: calc(100% + 80px);
}
@media (max-width:768px) {
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
padding: 30px;
}
.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
margin-left: -30px;
width: calc(100% + 60px);
max-width: calc(100% + 60px);
}
}
.rtl .menu-item-has-children .dropdown-menu-toggle {
padding-left: 20px;
}
.rtl .main-navigation .main-nav ul li.menu-item-has-children>a {
padding-right: 20px;
}
.one-container .sidebar .widget {
padding: 0px;
}
.append_row {
color: black !important;
background-color: #FFD6D6 !important;
border: 1px #ccc solid !important;
}
.append_column {
color: black !important;
background-color: #D6FFD6 !important;
border: 1px #ccc solid !important;
}
table#my-table td {
width: 50px;
height: 27px;
border: 1px solid #D3D3D3;
text-align: center;
padding: 0;
}
div#my-container input {
padding: 5px;
font-size: 12px !important;
width: 100px;
margin: 2px;
}
.row {
background-color: #FFD6D6 !important;
}
.col {
background-color: #D6FFD6 !important;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script>
// append row to the HTML table
function appendRow() {
var tbl = document.getElementById('my-table'), // table reference
row = tbl.insertRow(tbl.rows.length), // append table row
i;
// insert table cells to the new row
for (i = 0; i < tbl.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
// create DIV element and append to the table cell
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode(text); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('class', style); // set DIV class attribute
div.setAttribute('className', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
// append column to the HTML table
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
}
// delete table rows with index greater then 0
function deleteRows() {
var tbl = document.getElementById('my-table'), // table reference
lastRow = tbl.rows.length - 1, // set the last row index
i;
// delete rows with index greater then 0
for (i = lastRow; i > 0; i--) {
tbl.deleteRow(i);
}
}
// delete table columns with index greater then 0
function deleteColumns() {
var tbl = document.getElementById('my-table'), // table reference
lastCol = tbl.rows[0].cells.length - 1, // set the last column index
i, j;
// delete cells with index greater then 0 (for each row)
for (i = 0; i < tbl.rows.length; i++) {
for (j = lastCol; j > 0; j--) {
tbl.rows[i].deleteCell(j);
}
}
}
</script>
<div id="my-container">
<center><br>
<input type="button" value="Add row" onclick="javascript:appendRow()" class="append_row"><br>
<input type="button" value="Add column" onclick="javascript:appendColumn()" class="append_column"><br>
<input type="button" value="Delete rows" onclick="javascript:deleteRows()" class="delete"><br>
<input type="button" value="Delete columns" onclick="javascript:deleteColumns()" class="delete"><br>
<input type="button" value="Delete both" onclick="javascript:deleteColumns();deleteRows()" class="delete"><p></p>
<table id="my-table" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td>Small</td>
</tr>
</tbody></table>
<p></p></center>
</div>
<thead>
元素中,其余部分放在<tbody>
元素中。此外,我更新了代码以在删除行时更新行号和ID,并将一些代码移动到自己的函数中。 - user113716clone = tbody.removeChild(tbody.rows[0]);
。这样,您可以从服务器发送该行,并立即将其删除,存储在clone
中。然后创建另一个按钮,用于添加该初始行。由于没有必要在表格中重复相同的按钮,因此可能只需要在表格外部添加单个按钮以添加行。 - user113716