htmltable编辑
时间: 2023-10-26 09:06:52 浏览: 44
根据提供的引用内容,你想要实现一个通过JavaScript编辑HTML表格的功能,包括添加行、删除行、添加单元格和删除单元格。你可以使用jQuery选择器来选取表格中的元素进行操作。例如,通过选择器$('#mainTbody span.studentname'),你可以选取所有class为studentname的span元素。另外,在样式方面,你可以使用CSS来定义表格的样式,如设置宽度、浮动和鼠标悬停时的背景颜色。以下是一个简单的示例,展示了如何实现这个功能:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.typeadd {
float: left;
width: 6%;
}
.typeadd:hover {
background-color: #ccc;
cursor: pointer;
}
.typecut {
float: left;
width: 6%;
}
.typecut:hover {
background-color: #ccc;
cursor: pointer;
}
.contentadd {
float: left;
width: 6%;
}
.contentadd:hover {
background-color: #ccc;
cursor: pointer;
}
.contentcut {
float: left;
width: 6%;
}
.contentcut:hover {
background-color: #ccc;
cursor: pointer;
}
.contentadd_ {
float: left;
width: 6%;
}
.contentadd_:hover {
background-color: #ccc;
cursor: pointer;
}
.contentcut_ {
float: left;
width: 6%;
}
.contentcut_:hover {
background-color: #ccc;
cursor: pointer;
}
.typename {
float: left;
width: 88%;
}
.content {
float: left;
width: 88%;
}
.content_ {
float: left;
width: 88%;
}
</style>
</head>
<body>
<table id="mainTable">
<thead>
<tr>
<th class="typename">Type</th>
<th class="content">Content</th>
<th class="content_">Content_</th>
<th></th> <!-- This is an empty column for buttons -->
</tr>
</thead>
<tbody id="mainTbody">
<tr>
<td class="typename">Type 1</td>
<td class="content">Content 1</td>
<td class="content_">Content 1_</td>
<td>
<span class="typeadd">+</span>
<span class="typecut">-</span>
<span class="contentadd">+</span>
<span class="contentcut">-</span>
<span class="contentadd_">+</span>
<span class="contentcut_">-</span>
</td>
</tr>
<tr>
<td class="typename">Type 2</td>
<td class="content">Content 2</td>
<td class="content_">Content 2_</td>
<td>
<span class="typeadd">+</span>
<span class="typecut">-</span>
<span class="contentadd">+</span>
<span class="contentcut">-</span>
<span class="contentadd_">+</span>
<span class="contentcut_">-</span>
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 添加行
$('#mainTable').on('click', '.typeadd', function() {
var newRow = '<tr>' +
'<td class="typename">New Type</td>' +
'<td class="content">New Content</td>' +
'<td class="content_">New Content_</td>' +
'<td>' +
'<span class="typeadd">+</span>' +
'<span class="typecut">-</span>' +
'<span class="contentadd">+</span>' +
'<span class="contentcut">-</span>' +
'<span class="contentadd_">+</span>' +
'<span class="contentcut_">-</span>' +
'</td>' +
'</tr>';
$(this).closest('tr').after(newRow);
});
// 删除行
$('#mainTable').on('click', '.typecut', function() {
$(this).closest('tr').remove();
});
// 添加单元格
$('#mainTable').on('click', '.contentadd', function() {
var newCell = '<td class="content">New Content</td>';
$(this).closest('td').before(newCell);
});
// 删除单元格
$('#mainTable').on('click', '.contentcut', function() {
$(this).closest('td').remove();
});
</script>
</body>
</html>
```
该示例中,我们为表格添加了一个thead和tbody,以及一些初始的行和列。通过点击相应的按钮,你可以实现添加行、删除行、添加单元格和删除单元格的功能。