jquery 添加删除记录练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>添加删除记录练习</title>

</head>

<body>

<tr>

<th>Email</th>

<th>Salary</th>

</tr>

<tr>

<td><a href="deleteEmp?id=001">Delete</a></td>

</tr>

<tr>

<td>Jerry</td>

<td>jerry@sohu.com</td>

<td><a href="deleteEmp?id=002">Delete</a></td>

</tr>

<tr>

<td><a href="deleteEmp?id=003">Delete</a></td>

</tr>

</table>

<h4>添加新员工</h4>

<table>

<tr>

</td>

</tr>

<tr>

<td class="word">email:</td>

</td>

</tr>

<tr>

<td class="word">salary:</td>

</td>

</tr>

<tr>

Submit

</button>

</td>

</tr>

</table>

</div>

功能说明:

1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息

2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息

技术要点:

1. DOM查询

2. 绑定事件监听

3. DOM增删改

4. 取消事件的默认行为

$(function () {

// 获取三个输入框和输入框中的值

var $empName = $('#empName');

var $email = $('#email');

var $salary = $('#salary');

$('#addEmpButton').click(function () {

var empName = $empName.val();

var email = $email.val();

var salary = $salary.val();

// <tr>

// <td>Bob</td>

// <td>bob@tom.com</td>

// <td>10000</td>

// <td><a href="deleteEmp?id=003">Delete</a></td>

// </tr>

$('<tr></tr>')

.append('<td>'+empName+'</td>')

.append('<td>'+email+'</td>')

.append('<td>'+salary+'</td>')

.append('<td><a href="deleteEmp?id=003">Delete</a></td>')

.appendTo('#employeeTable>tbody')

.find('a').click(clickA);

$empName.val('');

$email.val('');

$salary.val('');

});

$('a').click(clickA)

function clickA(event) {

// 阻止默认事件行为

event.preventDefault()

var $tr = $(this).parent().parent();

var name = $tr.children(':first').html();

if (confirm('你确定要删除'+name+'的信息吗？')){

$tr.remove();

}

})

</script>

</body>

</html>

posted @ 2020-08-09 11:26 13522679763-任国强阅读(193) 评论(0) 收藏举报

刷新页面返回顶部

Eric

jquery 添加删除记录练习

公告