按下按钮时如何添加表格

Question

我正在尝试制作某种日历，我可以在其中输入一些任务我已经有了设计模板但我希望能够在按下按钮时添加一个新表（天）。

在上图中你可以看到我想要做什么。 这是我正在使用的模板：

HTML

<tr>        
<th>            
<div class="dls">               
<div class="select">                    
<select name="dls" id="dls">                        
<option value="1" selected="selected">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>                         <option value="7">Sunday</option>                   
</select>               
</div>          
</div>      
</th>
</tr>

<tr>        
<td>            
<input type="text" name="publisher" form="pubName">             
<input type="text" name="publisher" form="pubName">             
<input type="text" name="publisher" form="pubName">             
<input type="text" name="publisher" form="pubName">         
</td> 
</tr>

CSS

body {  font-size: 13px; } 

.dls {  font-size: 13px;    text-align: center;     background: transparent;    border: none;   border-radius: 6px;     overflow: hidden;   position: relative; } 

.dls .select{   height: 22px;   width: 125px;   background-position: center;    text-align: center; } 

.dls .select select{    background: transparent;    line-height: 1;     border: 0;  padding: 0;     border-radius: 0;   width: 125px;   height: 22px;   position: relative;     z-index: 10;    font-size: 13px;    color: #ffffff; }

table th {  text-align: center;     background-color: #006fc4;  border: 1px solid #006fc4;  color: #fff;    width: 128px;   height: 22px; } 

table td {  text-align: center;     border: 1px solid #006fc4;  padding: 2px 2px;   width: 128px;   height: 22px; } 

ul { list-style-type: none; } input { text-align: center; width: 125px; height: 22px; font-size: 13px; }

Answer 1

正如有人对您的帖子发表评论，请尝试阅读一些有关 DOM 操作的教程，但既然他告诉您要学习它，我会给您执行此操作的代码，然后您其余的可以稍后学习。

最简单的方法就是在代码中插入一个 HTML 标记。

您应该继续做的第一件事是使用您需要插入/复制的 div 创建一个变量

var div = "<option value='1' selected='selected'>Monday</option>"

现在你必须在某处插入 div。

document.getElementById("dls").innerHTML += div;

上面的代码将你放在变量“div”中的HTML代码插入到id为“dls”的元素中。

现在显然你不只是想插入一堆带有文本“Monday”和 value="1" 的 div

所以打算让它更可定制......

首先我们要创建一个函数：

function insertNew(value, day) {

}

现在你有一个名为 insertNew() 的函数，它有两个参数，名为 value 和 day，所以你可以将它更改为 insertNew(2, "Tuesday") 但现在无论如何它什么都不做，所以我们将添加函数的一些代码。

首先我们要在函数中创建一个let变量，所以删除原来的“div”变量，“var”和“let”的区别是let只存在于该函数中，函数完成后将被删除完成后，它还有更多属性，但这就是您现在需要担心的全部，但为了使该功能更易于使用，我们将使其更加自动化。

function insertNew(value, day) {
    let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";

    return div; // Return only spits the value out to the console, much like console.log(), but return stops the function from doing anymore code.
}

现在如果你执行 insertNew(3, "Wednesday")，你会得到 ​​p>

<option value='3' selected='selected'>Wednesday</option>

所以现在你也可以让它插入代码。

function insertNew(value, day) {
    let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";

    document.getElementById("dls").innerHTML += div;
}

它会插入正确的内容，但要自动填写数字，你必须在函数外部创建一个变量，然后每次函数运行时增加该函数的值，当你运行函数，而不是在函数的“值”参数中输入数字，只需输入向上计数的变量的名称。

var number = 1;

function insertNew(value, day) {
    number++; // ++ just simply adds one to the integer much like number = number + 1, they do the same.

    let div = "<option value='" + value + "' selected='selected'>" + day + "</option>";

    document.getElementById("dls").innerHTML += div;
}

现在当你想运行这个函数时，只需运行 insertNew(number, "Tuesday") ，每次运行它，数字都会加一，如果你真的想自动化它，你也可以添加所有日期的名称到一个数组，然后循环遍历它，因此只需要执行函数而不用担心改变任何东西......

希望这会有所帮助！

编辑：我注意到与您想要的相比，该脚本插入了错误的 div，但是代码可以通过更改变量中的 HTML 来适应，您可以轻松修复它！