[英]Using a button in a table to remove that specific row
I am building a diary to store my running times, dates and distances. 我正在建立一本日记来存储我的跑步时间,日期和距离。 I current have this which is a table with 3 columns of data and a button to append the information stored in the data fields to the next row of the table. 我目前有一个带有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>
and the JS: 和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);
});
});
How do I make the '#clearRow' button remove the table row that it is nested inside? 如何使“ #clearRow”按钮删除嵌套在其中的表行?
I have come up with this piece of code, but it doesn't work properly, any help please? 我已经拿出了这段代码,但是它不能正常工作,请帮忙吗?
$('#clearRow').on('click', function(e){
$(this).closest('tr').remove()
});
IDs should be unique. ID应该是唯一的。 You should use classes instead: 您应该改用类:
<button class="clearRow">Clear Entry'+'</button>
Also, since your elements are being dynamically added, you should be using event delegation : 另外,由于您的元素是动态添加的,因此您应该使用事件委托 :
$('#diary').on('click', '.clearRow', function(e){
$(this).closest('tr').remove()
});
This way, the click will be bound to the diary
table, which will check if you clicked on a clearRow
button when the event bubbles up to the table. 这样,单击将绑定到diary
表,当事件冒泡到表时, diary
表将检查是否单击了clearRow
按钮。
I hope this is help u 我希望这对你有帮助
$(document).ready(function(){
$("#diarySubmit").on('click', function(){
var row_uniqe_id = Math.round(Math.random()*100000);
var distanceRan = $('#distanceField').val();
var timeRan = $('#timeField').val();
var dateRan = $('#dateField').val();
var new_row = '<tr>\
<td>'+distanceRan+'</td>\
<td>'+timeRan+'</td><td>'+dateRan+'</td>\
<td><button onclick="javascript:$(\'tr.'+row_uniqe_id+'\').remove();">Clear Entry</button></td>\
</tr>';
$('#diary').append(new_row);
});
});
Compare 相比
This is work 这是工作
var new_row = '<tr>\
<td>'+distanceRan+'</td>\
<td>'+timeRan+'</td><td>'+dateRan+'</td>\
<td><button onclick="javascript:$(\'tr.'+row_uniqe_id+'\').remove();">Clear Entry</button></td>\
</tr>';
This is work too 这也是工作
var new_row = '<tr>'
+' <td>'+distanceRan+'</td>'
+' <td>'+timeRan+'</td><td>'+dateRan+'</td>'
+' <td><button onclick="javascript:$(\'tr.'+row_uniqe_id+'\').remove();">Clear Entry</button></td>'
+' </tr>';
This is Error 这是错误
var new_row = '<tr>
<td>'+distanceRan+'</td>
<td>'+timeRan+'</td><td>'+dateRan+'</td>
<td><button onclick="javascript:$(\'tr.'+row_uniqe_id+'\').remove();">Clear Entry</button></td>
</tr>';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.