0

您好，我正在使用 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>

这很好用，但是当我点击更多时，以前选择的数据就会被删除。当我按更多以增加额外时间时，数据应该是原样。请帮助我如何解决这个问题？先感谢您。

4

4 回答 4

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 添加计数器。

于 2013-10-03T12:28:47.447 回答
1

您可以对 ex 使用 clone 方法：此示例用于将 tr 附加到 id 为 vtable 的表上。

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

更多是单击以创建 div 的按钮的 id。请注意，这是出于演示目的

同样根据您的问题，您以前的数据正在擦除 bcoz 您正在使用 + 在代码中插入 html 而不是这个您需要使用 append 或 clone 方法，因此它始终会在末尾附加数据，您也可以将不同的 id 传递给每个 html 附加。

于 2013-10-03T12:23:28.507 回答
0

尝试改变

div.innerHTML = div.innerHTML + timeDiv;

至

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

有关更多详细信息，请查看以下链接

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

于 2013-10-03T12:29:36.093 回答
0

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);

}

于 2013-10-03T12:21:54.090 回答