Question

您好我正在使用php创建网站。我有一个表格用于添加约会。在该页面中，用户可以填写日期，开始预约的时间和结束时间。但如果用户想要添加额外的日期和时间，他/她也可以添加。为此，我写了下面的代码。

   <div id="date">
   <table>
   <tr>
   <td>
   Date<br>
   <input type="text" id="dateid">
   </td>
   <td>startTime:<select><option value="00:00">00:00</option></select></td>
   <td>EndTime:<select><option value="00:00">00:00</option></select></td>
   <td><input type="button" value="Extra Time" onClick="addTime()"></td>
   </tr>
   </table>
    </div>

对于我在功能上创建的onlick事件。

   <script>
   function addTime() 
{
var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

   var div = document.getElementById('date');
div.innerHTML = div.innerHTML + timeDiv;

  }
</scritp>

这个工作正常，但是当我点击更多时，之前选择的数据被删除。当我按下更多额外的时间时，数据应该是这样的。 kidnly帮我怎么解决这个问题？先感谢您。

Answer 1

你可以使用克隆方法来代替：这个例子是一个tr附加在id为vtable的表上。

$(document).ready(function () {
    $("#more").click(function() {
      $(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable");
    });
});

其中更多是点击按钮的id来创建div。请注意这是出于演示目的

另外根据你的问题你以前的数据正在删除bcoz你正在使用+在你的代码中插入html而不是你需要使用append或clone方法所以它总是会在最后附加数据，你也可以通过每个html附加的不同ID。

Answer 2

这里的问题是innerHTML不记得值。如果需要维护状态，则不应使用innerHTML添加新内容。你需要使用appendChild。

function addTime() {    
    var timeDiv='<table><tr><td>Date</td></tr></table>';
    var div = document.createElement("div");
    div.innerHTML = timeDiv;
    document.getElementById('date').appendChild(div);
}

现在你将它标记为jQuery就像

一样简单

function addTime() {    
    var timeDiv='<div><table><tr><td>Date</td></tr></table></div>';
    $("#date").append(timeDiv);
}

现在，如果您继续致电addTime，您将添加具有相同ID的多个元素。您可能想要删除ID或向ID添加计数器。

Answer 3

jQuery是一种很好的方法：

<script>
  var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

  var div = $('div#date');
  div.append(timeDiv);

}

Answer 4

尝试更改

div.innerHTML = div.innerHTML + timeDiv;

到

$('#date').append(timeDiv);

了解更多详情，请查看以下链接

http://api.jquery.com/append/

如何在现有div中附加div？

4 个答案: