Question

我正在制作日记来存储我的运行时间，日期和距离。我目前有一个包含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);
        });
});

如何制作＆＃39;＃clearRow＆＃39;按钮删除它嵌套在里面的表格行？

我已经提出了这段代码，但它没有正常工作，请问有什么帮助吗？

$('#clearRow').on('click', function(e){
   $(this).closest('tr').remove()
});

Answer 1

ID应该是唯一的。你应该使用类来代替：

<button class="clearRow">Clear Entry'+'</button>

此外，由于您的元素是动态添加的，因此您应该使用event delegation：

$('#diary').on('click', '.clearRow', function(e){
    $(this).closest('tr').remove()
});

这样，点击将绑定到diary表格，当事件冒泡到表格时，会检查您是否点击了clearRow按钮。

Answer 2

我希望这对你有帮助

    $(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);
      });
    });

Answer 3

比较

这是工作

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>';

这也是工作

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>';

这是错误

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>';

使用表中的按钮删除该特定行

3 个答案: