Question

添加功能仅适用。

输入内容并每次点击添加按钮时，都会看到列表。

我希望选择按钮的innerHTML作为选择，并在切换时取消选择。选择选择按钮后，将在选择按钮的右侧显示一个删除按钮，否则将不显示该删除按钮。

您可以使用scope属性和tbody标签来做到这一点吗，让我知道scope属性和tbody标签的工作。

我还要编辑选定的列表。

如果选择了选择按钮，则编辑按钮将在表单中可见。在编辑功能中添加一些代码，以便我可以使用带有输入字段的新输入来编辑所选列表。

列表中的

第n个孩子的（偶数和奇数）颜色应与CSS所示的表中的颜色不同。这需要在javascript中完成，以便当我删除列表时，该列表与其上或下列表的颜色（nth-child（偶数和奇数））不匹配。

并添加一些代码以删除删除功能中的所有列表。

th,
td {
  padding: 10px;
}

#b1 {
  outline: none;
  background: green;
  color: white;
  border: none;
  padding: 5px 20px;
}

#b2 {
  outline: none;
  background: red;
  color: white;
  border: none;
  padding: 5px 20px;
}

#Table {
  border-collapse: collapse;
  width: 600px;
}

#Form {
  margin-left: 700px;
  margin-top: 20px;
}

#fname {
  padding: 10px;
  width: 200px;
  border: 0.1px solid green;
  outline: none;
  user-select: none;
}

#lname {
  padding: 10px;
  width: 200px;
  border: 0.1px solid green;
  outline: none;
  user-select: none;
}

#age {
  padding: 10px;
  width: 200px;
  border: 0.1px solid green;
  outline: none;
  user-select: none;
}

button[type=button] {
  padding: 5px 10px;
  background: #353535;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
}

tr {
  background: white;
  color: black;
  transition: 0.4s;
  cursor: pointer;
  text-align: center;
}

tr:nth-child(even) {
  background: black;
  color: white;
}

tr:nth-child(odd) {
  background: rgb(0, 0, 0, 0.8);
  color: white;
}

tr:first-child {
  background: #153535;
  color: white;
}

tr:hover {
  background: white;
  color: black;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<body>
  <table id="Table" border="1">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Select</th>
      <th>Remove</th>
    </tr>
  </table>
  <form name="myForm" id="Form">
    <input type="text" placeholder=" First Name" name="fname" id="fname" />
    <br/>
    <br/>
    <input type="text" placeholder=" Last Name" name="lname" id="lname" />
    <br/>
    <br/>
    <input type="text" placeholder=" Age" name="age" id="age" />
    <br/>
    <br/>
    <button type="button" onclick="add()">Add</button>
    <button type="button" onclick="edit()">Edit</button>
    <button type="button" onclick="remove()">Remove All</button>
  </form>
  <script>
    function check() {
      var isEmpty = false;
      var fname = document.getElementById("fname").value;
      var lname = document.getElementById("lname").value;
      var age = document.getElementById("age").value;
      if (fname == "") {
        alert("Enter First Name.");
        isEmpty = true;
      } else if (lname == "") {
        alert("Enter Last Name.");
        isEmpty = true;
      } else if (age == "") {
        alert("Enter Age.");
        isEmpty = true;
      }
      return isEmpty;
    }

    function select() {
      var i;
      var table = document.getElementById("Table");
      for (i = 1; i < table.rows.length; i++) {
        table.rows[i].onclick = function() {
          document.getElementById("fname").value = this.cells[0].innerHTML;
          document.getElementById("lname").value = this.cells[1].innerHTML;
          age = document.getElementById("age").value = this.cells[2].innerHTML;
          var rindex = this.rowIndex;
          console.log(rindex);
        }
      }
    }
    select();

    function add() {
      if (!check()) {
        var i;
        var table = document.getElementById("Table");
        var fname = document.getElementById("fname").value;
        var lname = document.getElementById("lname").value;
        var age = document.getElementById("age").value;
        document.getElementById("fname").value = "";
        document.getElementById("lname").value = "";
        document.getElementById("age").value = "";

        var insrow = table.insertRow(table.length);
        var cell1 = insrow.insertCell(0);
        var cell2 = insrow.insertCell(1);
        var cell3 = insrow.insertCell(2);
        var cell4 = insrow.insertCell(3);
        var cell5 = insrow.insertCell(4);

        var b1 = document.createElement("BUTTON");
        b1.innerHTML = "SELECT";
        b1.setAttribute("id", "b1");

        var b2 = document.createElement("BUTTON");
        b2.innerHTML = "REMOVE";
        b2.setAttribute("id", "b2");
        b2.addEventListener("click", function() {
          this.parentElement.parentElement.style.display = "none";
        });

        cell1.innerHTML = fname;
        cell2.innerHTML = lname;
        cell3.innerHTML = age;
        cell4.appendChild(b1);
        cell5.appendChild(b2);
      }
      select();
    }

    function edit() {
      var table = document.getElementById("Table");
      var fname = document.getElementById("fname").value;
      var lname = document.getElementById("lname").value;
      var age = document.getElementById("age").value;
    }

    function remove() {

    }
  </script>
</body>

</html>

需要帮助表Java

0 个答案: