我正在构建日志以存储我的运行时间,日期和距离。我目前有这是一个具有3列数据的表格和一个按钮,用于将存储在数据字段中的信息附加到表格的下一行。使用表格中的按钮删除特定行
<!DOCTYPE HTML>
<head>
<title>Running Diary</title>
<link type = "text/css" rel = "stylesheet" href= "running.css"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src ="running.js"></script>
</head>
<body>
<!-- Title at the top of page !-->
<h1 id = "title"> Running Diary </h1>
</br>
</br>
</br>
<!-- Table containing text/date fields and the entries for a running diary. !-->
<table id = "diary">
<!-- Column titles for the running diary !-->
<thead id = "diaryHeader">
<th>Date</th>
<th>Distance Ran (KM)</th>
<th>Time</th>
</th>
</thead>
<!-- The table row that contains the text field and enter button for adding each entry to the diary !-->
<tbody>
<tr id = "diaryFields">
<td> <input type="date" id="dateField"/></td>
<td> <input type="number" id="distanceField" placeholder="Distance"/> </td>
<td> <input type="text" id="timeField" placeholder="HH:MM:SS"/> </td>
<td> <input type="submit" value="Add" id="diarySubmit"/>
</tr>
</table>
</body>
和JS:
$(document).ready(function(){
//This handles the click function for diarySubmit button
$("#diarySubmit").on('click', function(){
//Taking values from each textbox
var distanceRan = $('#distanceField').val();
var timeRan = $('#timeField').val();
var dateRan = $('#dateField').val();
//creating the new row to be added with a button to clear the entry
var new_row = '<tr><td>'+distanceRan+'</td><td>'+timeRan+'</td><td>'+dateRan+'</td>'+'<td>'+'<button id="clearRow">Clear Entry'+'</button></td></tr>'
$('#diary').append(new_row);
});
});
我如何做 '#clearRow' 按钮,删除该表行,它是里面嵌套?
我想出了这段代码,但它不能正常工作,请帮忙吗?
$('#clearRow').on('click', function(e){
$(this).closest('tr').remove()
});
虽然我同意,一个ID是不是一个问题,因为这里的'this' – 2014-09-01 00:12:30
我去测试它自己,看来,你是对的!由于jQuery没有以通常的方式使用选择器,因此将ID作为委托事件工作正常。的确有趣! [小提琴在这里](http://jsfiddle.net/0awnqo81/) – Stryner 2014-09-01 00:18:28
我认为这是最好的答案,虽然+1 – 2014-09-01 00:19:39