Можете ли вы динамически добавлять кнопки в таблицу для отображения модального меню? - PullRequest
Новая
       22

Можете ли вы динамически добавлять кнопки в таблицу для отображения модального меню?

0 голосов
/ 26 июня 2019

Я создаю динамическую таблицу, добавляю кнопки в строку, чтобы открыть модальные формы для редактирования содержимого таблицы. Кнопка onclick не откроет модальный.

Я тестировал модал с помощью другой кнопки на той же странице, только не отраженный в PHP, и он работает. Я попытался открыть модальный из отдельной функции JavaScript, и это не работает. Я пробовал различные экранирующие символы для строковых кавычек, и это не помогло. 

<!DOCTYPE html>
<html>
    <head>      
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <meta charset="UTF-8">
        <title>Paradise Intranet</title>
    </head>
 <body>
<!--navigation bar -->
 <div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'Announcements')">Announcements</button>
  <div style="float:right" class="w3-padding">Paradise Family Healthcare Intranet
  </div>
</div>
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=============Announcements-->
<div id="Announcements" class="w3-container city">
 <?php
  //Connect to database
  $host="localhost";
  $port=3306;
  $socket="";
  $user="root";
  $password="1234567";
  $dbname="";
  // Connection string
  $con = new mysqli($host, $user, $password, $dbname, $port, $socket)
      or die ('Could not connect to the database server' . mysqli_connect_error());
  // Array
  echo "<h2>Announcements</h2>";
  echo "<div class=w3-responsive>";
    echo "<table class='w3-table w3-striped'>";
    echo "<tr>";
        echo "<th>Date</th>";
        echo "<th>Title</th>";
        echo "<th>Announcement</th>";
        echo "</tr>";
        $sql="SELECT Modified,TitleID,Body from pfhc_intranet.announcements2 ORDER BY str_to_date(Modified,'%d-%m-%Y')";
        $conresult=mysqli_query($con,$sql);
        while($row= mysqli_fetch_assoc($conresult)) {
            $d=strtotime($row[Modified]);
            $date=date("m-d-Y",$d);
            echo "<tr>";
            echo "<td width='10%'>$date</td>";
            echo "<td>$row[TitleID]</td>";
            echo "<td>$row[Body]</td>";
//This is the button that doesn't work
            echo "<td><button type='button' class='w3-btn w3-black' onclick='document.getElementById('add_1').style.display='block'; return false;''><i class='material-icons w3-large'>add</i></button></td>";
            echo "</tr>";
        }   
    echo "</table>";
    mysqli_close($con);
  echo "</div>";
 ?>
</div>
 <!--===============Modal add item-->
 <div id="add_1" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-red"> 
        <span onclick = "document.getElementById('add_1').style.display ='none'" class = "w3-button w3-display-topright">&times;</span>
        <h2>Add New Item</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
      </div>
    </div>
</div>
<!--=============================================Javascript-->
<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
   tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
  x = document.getElementsByClassName("hidden");
  for (i = 0; i <x.length; i++) {
    x[i].style.display = "none";
  }
  } 
</script>
</body>

Простой модал должен открыться, но не открывается.

...