时间戳

首页 > 解决方案 > html每周食谱表按钮

html - html每周食谱表按钮

问题描述

我需要帮助我正在尝试使用 html 和 css 制作每周食谱网页。当您点击添加按钮时，它有一个表格，要求您添加您想要添加的食谱食谱应该添加到用户指定的工作日之一，这应该是一个表格，显示特定日期的所有食谱有人可以告诉我如何我可以做到这一点，谢谢你下面是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title> Weekly Recipes </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="heading">
        <h2>Weekly Recipes</h2>
    <div>

    <form method="POST" action="index.html">
        <input type="text" name="task" class="task_input">
        <button type="submit" class="task_btn" name="submit">Add Recipe</button>

    </form>

    <div>
        <table id="t01">
          <tr>
            <th>Sunday</th>
            <th>Monday</th> 
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
          </tr>
        </table>
    </div>

</body>
</html>

页面

    .heading{
    width: 400px;
    height:150px;
    margin: 30px auto;
    text-align: center;
    color: #6B8E23;
    background: #FFF8DC;
    border: 2px solid #6B8E23;
    border-radius: 20px

}

form{
    width:250px;
    margin: 30px auto;
    border-radius :5px;
    padding: 10px;
    background: #FFF8DC;
    border: 1px solid #6B8E23;
}

table {
  width:100%;

}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: #6B8E23;
  color: white;


}

标签： htmlcss

解决方案

这是一个使用最少的 JavaScript 根据提供的极少数要求更新 DOM 的示例。

document.getElementById("recipe-form").addEventListener("submit", function(event) {
  event.preventDefault(); // Don't attempt to post form to server.

  const recipe = document.getElementById("task").value;
  const day = document.getElementById("day").value;
  const cell = document.querySelectorAll("#t01 td")[day];

  cell.innerHTML += "<p>" + recipe + "</p>"; // Update the chosen day cell.
  document.getElementById("task").value = null; // Clear the input.
});
.heading {
  width: 400px;
  height: 150px;
  margin: 30px auto;
  text-align: center;
  color: #6B8E23;
  background: #FFF8DC;
  border: 2px solid #6B8E23;
  border-radius: 20px
}

form {
  width: 320px;
  margin: 30px auto;
  border-radius: 5px;
  padding: 10px;
  background: #FFF8DC;
  border: 1px solid #6B8E23;
}

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
}

table#t01 tr:nth-child(even) {
  background-color: #eee;
}

table#t01 tr:nth-child(odd) {
  background-color: #fff;
}

table#t01 th {
  background-color: #6B8E23;
  color: white;
}
<div class="heading">
  <h2>Weekly Recipes</h2>
</div>

<form id="recipe-form">
  <input type="text" name="task" id="task" class="task_input">
  <select id="day">
    <option value="0">Sunday</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
  </select>
  <button type="submit" class="task_btn" name="submit">Add Recipe</button>

</form>

<div>
  <table id="t01">
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

推荐阅读