色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery表格刪除添加文字

徐玉鳳1年前7瀏覽0評論

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優化頁面的交互效果了吧。