在页面上写一个table标签,写一个按钮,响应单击事件,调用一个函数,每单击一次,为table增加一行数据,单元格中内容任意。2)上述table中生成的每行尾部单元格内加一个删除链接,当点击此链接时删除当前行。3)在页面上画两个div盒子,用鼠标可以拖曳任意一个div方块。
时间: 2024-03-17 13:41:27 浏览: 78
好的,以下是你需要的代码:
1. table标签和按钮响应事件:
```html
<table id="myTable">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
</table>
<button onclick="addRow()">增加一行</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "新行第一列";
cell2.innerHTML = "新行第二列";
}
</script>
```
2. 删除链接响应事件:
```html
<table id="myTable">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<script>
function deleteRow(link) {
var row = link.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
```
3. 拖曳div盒子:
```html
<div id="box1" onmousedown="startDrag(event, this)">
<p>可拖曳盒子1</p>
</div>
<div id="box2" onmousedown="startDrag(event, this)">
<p>可拖曳盒子2</p>
</div>
<script>
function startDrag(event, element) {
event.preventDefault();
var offsetX = event.clientX - parseInt(getComputedStyle(element).left);
var offsetY = event.clientY - parseInt(getComputedStyle(element).top);
document.onmousemove = function(event) {
element.style.left = (event.clientX - offsetX) + "px";
element.style.top = (event.clientY - offsetY) + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: lightblue;
cursor: move;
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)