时间戳

首页 > 解决方案 > 如果单击按钮，则无法将行添加到 html 中的表格中

html - 如果单击按钮，则无法将行添加到 html 中的表格中

问题描述

我已经尝试了一切，一旦单击按钮，我就无法在 html 表中添加更多行。我使用过 JQuery 和 HTML 和 CSS。有人可以帮帮我吗。我正在尝试创建一个待办事项列表，我可以在其中添加更多任务，这只是开始。这是我运行此代码后可以看到的预览。下面的代码预览

这是我用来创建我的待办事项列表的代码。

<html>
  
<head>
    <meta charset="utf-8">
    <title>To Do List for Developers</title>
</head>

<style>
 body{
     background-color:white;
 }

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

 #addRowToDo {
    vertical-align: bottom;
    margin:0 0 0 2px;
}

.add:hover {
  background: rgb(255, 228, 166);
}

#addRowInProgress {
    vertical-align: bottom;
    margin: 0 0 0 2px;
    margin-left:30%;
}

#addRowChild {
  line-height: 50px;
}

#addRowDone {
    vertical-align: bottom;
    margin: 0 0 0 2px;
    margin-left:75%;
}

 .allTrs, .allTds{
    border: 1px solid black;
    text-align: left;
    padding: 7px;
 }

.add {
  height: 53px;
  width: 82px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-size:30px;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

</style>


<body>
  
  
  <div id="addRowToDo" class="add">
    <div id="addRowChild"><b>+</b></div>
  </div>
  <div id="addRowInProgress" class="add">
    <div id="addRowChild"><b>+</b></div>
  </div>
  <div id="addRowDone" class="add">
    <div id="addRowChild"><b>+</b></div>
  </div>

  <table id="myTable">
    <tr id="Trs" class="allTrs">
        <td class="allTds">To Do</td>
        <td class="allTds">In Progress</td>
        <td class="allTds">Done!</td>
    </tr>
    <tr id="defaultTr">
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>

</body>

<script type="javascript/text" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script>
  $('#addRowChild').click(function(){
    $('#myTable tbody').append(`<tr>${$('#defaultTr').html()}</tr>`);
  });
</script>

</html>

标签： html

解决方案

它实际上工作。由于您没有添加任何类而不是新创建的行，因此您无法在 UI 中看到新创建的行。我已经用类名更新了它。

$('#addRowChild').click(function () {
  $('#myTable tbody').append(`<tr class="allTrs">${$('#defaultTr').html()}</tr>`);
});
body {
  background-color: white;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#addRowToDo {
  vertical-align: bottom;
  margin: 0 0 0 2px;
}

.add:hover {
  background: rgb(255, 228, 166);
}

#addRowInProgress {
  vertical-align: bottom;
  margin: 0 0 0 2px;
  margin-left: 30%;
}

#addRowChild {
  line-height: 50px;
}

#addRowDone {
  vertical-align: bottom;
  margin: 0 0 0 2px;
  margin-left: 75%;
}

.allTrs,
.allTds {
  border: 1px solid black;
  text-align: left;
  padding: 7px;
}

.add {
  height: 53px;
  width: 82px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-size: 30px;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="addRowToDo" class="add">
  <div id="addRowChild"><b>+</b></div>
</div>
<div id="addRowInProgress" class="add">
  <div id="addRowChild"><b>+</b></div>
</div>
<div id="addRowDone" class="add">
  <div id="addRowChild"><b>+</b></div>
</div>

<table id="myTable">
  <tr id="Trs" class="allTrs">
    <td class="allTds">To Do</td>
    <td class="allTds">In Progress</td>
    <td class="allTds">Done!</td>
  </tr>
  <tr id="defaultTr" class="allTrs">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

推荐阅读