Question

我一直试图找到一种方法，使用按钮在另一个div中添加div，但我认为它的逻辑可能有点超出我目前的范围。基本上我有这个实验室的设施，当我在一个页面中创建它时，它应该将它们添加到数据库中，这已经完成并且正在工作。

然后我需要一个div作为popUp来检索每个实验室的信息，这也有效，但是如果我有多个实验室，那么显示那个实验室的所有信息都在一个popUp中。这让我想到了下一点。

我需要并且决定当我点击Aceptar按钮时，创建的新div应该有一个id = n，其中每增加一个新div，它就是n + 1，所以div1的id为1，div 2为2，等等。我认为这是使用数组...这样我可以更新我的PHP代码说：

 function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)

$result = do_query($query);

   return $result;
 }

现在这是我的代码......因为我很难过：

php中的Html代码。实验室列表的页面：

      <div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST

      <div>  //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
          <p>Lab #1</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box">
          <p>Lab #2</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box"> //So if I add another it would be Lab#4 with id=4
          <p>Lab #3</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div        

  </div>

以下是我用于将实验室添加到100％工作的数据库的另一页中使用的按钮：

  <input class="formatButton verInfo2"  type="button" value="Aceptar" id="btnAceptar"   onclick="agregar()"/>

在两个页面（列表和添加）中都存在脚本和包含。

我正在考虑添加新div（以及删除一个）的代码如下：

function agregar() {
var div = document.createElement('div');

div.className = 'box';

     '<div class="box">
          <p>Lab HERE GOES NUMBER</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>';

    document.getElementById('content').appendChild(div);
}

  function eliminar(input) {
 document.getElementById('content').removeChild( input.parentNode );
}

但我现在就如何继续进行了一次精神障碍＆gt;。＆lt;任何帮助都是天赐之物，我试着保持简短，只提出相关的代码，但如果还有什么我可以提供的，以便得到一些帮助，我会做。

提前多多感谢并祝福！

Answer 1

我认为你可以这样做：

div.id = querySelectorAll('lista > div').length +1;

每次添加div时长度都会有所不同。所以这对你有用。

Answer 2

如果我正确理解了代码，你想点击一个按钮，并且能够在另一个div中添加一个div，其id =到前一个id + 1？

JQUERY

$(document).ready(function(){
    var counter = 1;
$('#addDiv').click(function(){
    $('#'+counter).html('<div id="' + (++counter) + '"></div>');    
 });
});

HTML

<div id="1">

</div>
<button id="addDiv">Add Div Inside</button>

使用自动增量Id在div中添加新元素

2 个答案: