时间戳

首页 > 解决方案 > 如何使用 jQuery 只删除表中的一行附加信息？

javascript - 如何使用 jQuery 只删除表中的一行附加信息？

问题描述

我正在尝试制作一个“我最喜欢的电影”列表页面，用户可以在其中添加和评价电影。该计划应包括：

1）您可以添加到列表并对其进行评分的表格

2）您添加的所有内容的表格

3）删除表格每一行的按钮，让您从列表中删除元素（我遇到的问题）

它不是只删除一行，而是删除表中每个附加的电影/评级。此外，如果您单击其他任何地方，它也会删除所有内容。

4) 奖励：排序功能，所以我可以按标题或评级对表中的条目进行排序。

这里的例子：rithm school 例子

$(function() {
  $('#addMovieButton').click(function() {
    var addToTitle = $('#title').val();
    $('#tableTitle').append('<tr><td>' + addToTitle + '</td></tr>');

    var addToRating = $("#rating").val();
    $('#tableRating').append('<tr><td>' + addToRating + '</td></tr>');

    $('#tableDelete').append('<tr><td><input type="button" value="Delete All"</tr></td>');

    $('#tableRow').on('click', function() {
      $('#tableTitle').last().children().remove();
      $('#tableRating').last().children().remove();
      $('#tableDelete').last().children().remove();


    });
  });
});
h1 {
  text-align: center;
}

table {
  width: 100%;
  border-radius: 10px;
}

table,
td {
  border: 1px solid black;
  padding: 15px;
}

th {
  height: 50px;
  text-align: center;
}

td {
  text-align: center;
}

body {
  font-family: helvetica;
}

form {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label><b>Title</b></label>
  <input id="title" type="text" value="Movie Title">

  <label><b>Rating</b></label>
  <input id="rating" type="text" value="Rate The Movie from 0 to 10">

  <button type='button' id="addMovieButton">Add Movie</button>
</form>

<table>
  <tr id="tableRow">
    <th id="tableTitle">Title</th>
    <th id="tableRating">Rating</th>
    <th id="tableDelete">Delete</th>
  </tr>
</table>

标签： javascriptjqueryhtmlcss

解决方案

<table>结构

附加“行”的结构不是有效的 HTML。A<table>将至少有一个<tbody>. 如果用户不添加它，浏览器将添加它。尽管大多数方法、函数和属性都将<table>视为 的直接父级<tr>，但定位具有一些优势<tbody>。如果有一个<thead>then 目标<tbody>可以让你从试图避免的额外步骤中解放出来<th>。

在构建架构时请牢记这些规则<table>

  • <tbody>只能<tr>作为孩子（直系后代）
  • <tr>只能有<td>和<th>作为孩子
  • <td>并且<th>可以有任何东西作为后代。

确保行的结构如下：

<tr><td</td>...<td></td></tr>

将行添加到<table>或<tbody>

演示

以下演示在 HTML 和 CSS 中有详细的注释，以及在 JavaScript 中注释的分步详细信息

$(function() {

  /*
  Bind the <form> to the 'submit', 'click', and 'change' events.
  Pass the Event Object thru
  */
  $('form').on('submit click change', function(event) {

    // Reference the type of event
    let eType = event.type;

    // if the 'submit' event was triggered...
    if (eType === 'submit') {

      // Stop the <form> from sending data to a server and resetting
      event.preventDefault();

      // Get the values of the <input>
      let name = $('.title').val();
      let rate = $('.rating').val();

      // Declare a htmlString using a Template Literal 
      const row = `
        <tr><td>${name}</td>
        <td>${rate}</td>
        <td><input class='sel' type='checkbox'>
        </td></tr>`;

      // Render the htmlString as the last child of the <tbody>
      $('.data').append(row);

      // Reset <form>
      $(this).trigger('reset');

      // ...otherwise if the 'click' event triggered...
    } else if (eType === 'click') {

      // ...and the clicked tag has class 'del'...
      if ($(event.target).hasClass('del')) {

        /*
        Collect all checked <input class='sel'>
        then on .each() one...
        */
        $('.sel:checked').each(function(i) {

          /*
          Get the ancestor <tr> of the current .sel
          and remove it
          */
          $(this).closest('tr').remove();
        });

        // Reset the <form>
        $('form').trigger('reset');
      }
      
      // ...otherwise if the 'change' event was triggered...
    } else if (eType === 'change') {

      // ...and the changed tag id is 'all'...
      if (event.target.id === 'all') {

        // Check if #all is checked or not
        let allChk = $('#all').is(':checked');

        // Loop thru each() <input class='sel'>...
        $('.sel').each(function(i) {

          /* 
          and check current .sel if #all is checked
          or uncheck current .sel if #all is NOT checked
          */
          $(this).prop('checked', allChk);
        });
      }
    }
    // Stop any events from bubbling any further up the event chain
    event.stopPropagation();
  });
});
:root {
  font: 400 3vw/1.2 Arial;
}

form {
  text-align: center;
}

table {
  width: 100%;
  border-radius: 10px;
  table-layout: fixed;
  margin: 12px auto
}

table,
td {
  border: 1px solid black;
  padding: 15px;
}

th {
  height: 30px;
  width: 20%;
}

th:first-of-type {
  width: 60%;
}

td {
  text-align: center;
}

button,
input,
label {
  display: inline-block;
  font-size: initial;
}

.all {
  font-weight: 400;
  padding: 3px 6px;
  border: 1.5px inset rgba(0, 28, 255, 0.3);
  margin-top: 3px;
}

.all::after {
  content: 'Selected'
}

/*
When input@all is :checked the label.all that follows
#all will change 
the content of its pseudo-element from 'Selected' to 'All'
*/
#all:checked+.all::after {
  content: 'All'
}

button:hover {
  cursor: pointer;
  outline: 3px outset rgba(0, 28, 255, 0.4);
  color: rgba(0, 28, 255, 0.6);
}

.all:hover {
  cursor: pointer;
  color: rgba(0, 28, 255, 0.8);
  background: rgba(0, 28, 255, 0.2);
}

.rating {
  text-align: right;
  width: 4ch;
}

.title {
  padding-left: 5px;
  width: 27ch;
}

/*
The checkbox #all is not visible to user but is accessible through the label.all 
which it is synced with (see comments in HTML
*/
#all {
  display: none
}
<form>
  <label>Title</label>
  <!--
  The [required] attribute enables built-in form validation
  If the submit event is triggered 
  and either <input> is blank, the submit event is interrupted and 
  a tooltip will notify 
  user that the <input> cannot be empty
  -->
  <input class="title" type="text" placeholder="Pulp Fiction" required>

  <label>Rating</label>
  
  <!-- See previous comment -->
  <input class="rating" type="number" min='0' max='10' placeholder="10" required>
  <!--
  <button type='submit'> or <input type='submit'>
  or <button> within a <form> will trigger a submit event by default
  -->
  <button>Add Movie</button>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Rating</th>
        <th>
          <button class='del' type='button'>Remove</button>
          <!--
          A <label> and a form control (ie <input>, <textarea>, <select>, etc) can be synced by
          matching the [for] attribute value to the form controls #id:
          1. <label for='XXX'>
          2. <input id='XXX'>
          When synced, clicking one will remotely click the other
          -->
          <input id='all' type='checkbox'>
          <label class='all' for='all'></label></th>
      </tr>
    </thead>
    <!--
    See post on <table> structure
    -->
    <tbody class='data'></tbody>
  </table>

</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读