按下按钮时如何添加表格

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 Manipulation的教程，但是由于他告诉您要学习它，因此我将为您提供执行此操作的代码，您以后可以学习其余内容。

做您想做的最简单的方法就是在代码中插入一个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”之间的区别仅在该函数中存在，并且在函数完成后将被删除，具有更多属性，但这就是您现在所要担心的，但是为了使该功能更易于使用，我们将使其变得更加自动化。

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”），您将获得

<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才具有适应性，您可以轻松地对其进行修复！