获取信息的JavaScript

当我点击按钮“点击我”，所选择的ID将打印的var divtest然后在<div id="container">淡出，当我按下另一个按钮“点击我”吧只获取第一个ID，但我想要的只是数据库中显示的第二个ID。如果我尝试删除选定的描述，它将返回到ID描述的容器。获取信息的JavaScript

我的数据库样本。

ID Description  
1 Hello 
2 Hi 
3 Thank You

这是我的示例代码。

<?php 
    $conn = mysqli_connect("localhost", "root", "","dblaquaresort") or die("Failed to Connect"); 
    $sql = "SELECT * FROM tblsample"; 
    $query = mysqli_query($conn, $sql); 
    while ($sample = mysqli_fetch_array($query)) 
    { 
    ?><div id="container"> 
    <label id="ID">ID: <?php echo $sample['ID']; ?></label> 
    <label id="Description">Description: <?php echo $sample['Description']; ?></label> 
    <button type="button" id="more_fields" onclick="add_fields();">Click me</button> </div> 
    <?php 
    } 
    ?> 

    <div id="room_fileds"> 
    <div> 
     <div class="content"> 
     <?php 
       function not_empty_string($s) 
       { 
       return $s !== " "; 
       } 
       $pieces = array_filter(explode(",", "Test"),'not_empty_string'); 
       foreach ($pieces as $piece) 
       { 
       $test_stinga = array_filter(explode("-", $piece),'not_empty_string'); 
       $test_stinga=preg_replace('/\s+/', '', $test_stinga); 
       } 
      ?> 
     </div> 
    </div> 
    </div> 
      <script> 
       var room = 1; 
       var wrapper = $(".testtt"); 
       function add_fields() 
       { 
       room++; 
       var objTo = document.getElementById('room_fileds'); 
       var ID = document.getElementById('ID').innerHTML; 
       var Desc = document.getElementById('Description').innerHTML; 
       var divtest = document.createElement("div"); 
       divtest.innerHTML = '<div class="label">TEST ' + room + ':</div> <div class="content"><span><p class="form-inline">Testing: '+ ID +'</span><span>Description: ' + Desc + '</span><button class="remove"> Remove</button></p></div>'; 
        objTo.appendChild(divtest) 
         } 
        $('#room_fileds').on("click",".remove", function(e) 
        { 
        $(this).parents().eq(5).remove(); 
        }) 
       </script>

这是我想要的输出。

Div Container 
ID: 1 Description: Hello <button>click me</button> 
ID: 2 Description: Hi <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button>

如果我点击ID = 2

Div Container 
ID: 1 Description: Hello <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button> 

Divtest 
ID: 2 Description: Hi <button>Remove</button>

如果我点击删除就回去的div容器。

ID: 1 Description: Hello <button>click me</button> 
ID: 2 Description: Hi <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button>

来源

2017-09-02 black1

你在这个循环中创建相同ID的HTML元素的3倍：

while ($sample = mysqli_fetch_array($query))

这个元素<div id="container">会根据你的榜样3次，你需要将每id不同。您可以使用该行的Id你取从数据库中，所以你可以这样做：

while ($sample = mysqli_fetch_array($query)) 
    { 
    ?><div id="container_<?php echo $sample['ID']; ?>"> 
    <label id="ID_<?php echo $sample['ID']; ?>">ID: <?php echo $sample['ID']; ?></label> 
    ......

所以当你添加此<?php echo $sample['ID']; ?>到您的HTML ID，如：id="container_<?php echo $sample['ID']; ?>"您创建的元素唯一的ID，你需要做到这一点有独特的HTML ID。

现在，您需要修改您的javascript函数：

function add_fields()

你要用它得到的参数，如：

function add_fields(id)

，您可以通过该行的ID，所以它会是：

<button type="button" id="more_fields_<?php echo $sample['ID']; ?>" onclick="add_fields(\"<?php echo $sample['ID']; ?>\");">Click me</button> </div>

，你就需要修改函数的内容，与工作：

function add_fields(id) 
    { 
    room++; 
    var objTo = document.getElementById('room_fileds_'+id); 
    .....

我希望这会有所帮助。

来源

2017-09-02 22:26:45 Jeff

获取信息的JavaScript

回答

相关问题