jQuery是一個開源的JavaScript庫,提供了很多簡化HTML文檔操作、事件處理、動畫等操作的功能,是web開發中的常用工具之一,今天我們來學習如何使用jQuery實現表格刪除和添加文字的功能。
首先,我們需要在HTML文檔中添加一個表格。注意,每個表格行必須包含一個刪除按鈕,以便我們能夠使用jQuery選擇器找到它。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td><button class="delete-button">刪除</button></td>
</tr>
<tr>
<td>小紅</td>
<td>20</td>
<td><button class="delete-button">刪除</button></td>
</tr>
</tbody>
</table>
接下來,我們需要編寫jQuery代碼來實現刪除和添加文字的功能。在這個例子中,我們將使用click()和text()函數。click()函數允許我們為“刪除”按鈕添加單擊事件,而text()函數則用于向頁面添加一些文本。
<script>
$(document).ready(function() {
// 刪除按鈕單擊事件
$('.delete-button').click(function() {
$(this).closest('tr').remove(); // 刪除表格行
});
// 添加文字到頁面上
$('#add-button').click(function() {
var text = $('#text-input').val(); // 獲取輸入框的值
if (text != '') {
$('#text-container').append('<p>' + text + '</p>'); // 將文本添加到頁面上
}
});
});
</script>
最后,我們需要在頁面上添加一個文本輸入框和一個添加按鈕。我們還需要一個文本容器來顯示我們添加到頁面上的文本。
<input type="text" id="text-input">
<button id="add-button">添加</button>
<div id="text-container"></div>
現在,我們已經成功地使用jQuery實現了表格刪除和添加文字的功能。通過以上的例子,相信你已經明白了如何利用jQuery優化頁面的交互效果了吧。
上一篇div hover 效果
下一篇div fixed 寬度