Question

我正在开发一个项目，其中创建了HTML表格行，其中包含姓名，详细信息，电话，电子邮件等信息。所有这些信息都存储在数据库中。

现在，我想获得一个模态框，当我点击表格行并获得整齐而整齐的行中的信息时。从代码中可以看出，我已经把它设置为警告框。但是，我想使用Jquery和bootstrap在模态框中获取相同的信息。

为此，请找到现有的现有代码。我没有为模态部分添加任何代码。这是因为，我不知道如何将表格行作为模态按钮。

<?php 

session_start();

if(isset($_SESSION['u_uid']))

    $uid = $_SESSION['u_id'];

    require_once('connect.php');

    $ReadSql = "SELECT * FROM `contact` WHERE users_id=$uid AND ACTIVE_INACTIVE=1 ORDER BY Name";
    $res = mysqli_query($connection, $ReadSql);

?>
<!DOCTYPE html>

<form action="http://motoko.sorainsurance.com.au/includes/logout.inc.php" method="POST">
                    <button type="submit" name="submit">Logout</button>
                    </form>

<form>
<input type="button" value="Add Contact" onclick="window.location.href='http://motoko.sorainsurance.com.au/crud/comp_contact_index.php'" />
</form>

<html>
<head>
    <title>Motoko</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">

        .table-hover tbody tr:hover td
        {
            background-color: #A9A9A9;
            color: white;         
        }
        body

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>                
<script type="text/javascript">   
    $(document).ready(function (){
        $('table tbody tr').click(function (){
            alert($(this).text());
        });
    });
</script>




<body> 
<div class="container">
    <div class="row">
        <table class="table">
        <table class="table table-hover">

            <tr>
                <th><strong>Contact Category</strong></th>
                <th><strong>Name</strong></th>
                <th><strong>Details</strong></th>
                <th><strong>Phone</strong></th>
                <th><strong>Email</strong></th>
                <th><strong>Address</strong></th>
                <th><strong>Extras</strong></th>
            </tr>
            <?php 
            while($r = mysqli_fetch_assoc($res)){
            ?>
            <tr>                    
                <td class= "r-Type"><?php echo $r['Contact_type']; ?></td> 
                <td class= "r-Name"><?php echo $r['Name']; ?></td> 
                <td class="r-Details"><?php 

                if ($r['Contact_type'] == 'Individual')
                {
                echo $r['Title']. ', '.$r['Company']; 
                }

                elseif ($r['Contact_type'] == 'Team')
                {
                echo $r['Company']; 
                }

                elseif ($r['Contact_type'] == 'Company')
                {
                echo ''; 
                }


                ?> </td>
                <td class="r-Phone"><?php echo $r['Phone']; ?></td> 
                <td class="r-Email"><?php echo $r['Email']; ?></td> 
                <td class="r-Address"><?php echo $r['Address']; ?></td> 
                <td class="r-Update"><a href="update.php?id=<?php echo $r['id'] ?>">Edit</a></td>
                <td class="r-Delete"><a href='delete.php?id=<?php echo $r['id']?>'>Delete</a></td>

            </tr>

            <?php } ?>
            </table>            
            </div>
            </body>
            </html>

Jquery使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>                
    <script type="text/javascript">   
        $(document).ready(function (){
            $('table tbody tr').click(function (){
                alert($(this).text());
            });
        });
    </script>

Answer 1

您可以在'.click（）'事件中执行操作，您可以打开bootdtrap模式。这是一个可能对您有帮助的演示模式：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


  <div class="container">
    <h2>Click the button to get row information</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#infoModal">Get Information</button>
    <!-- Modal -->
    <div class="modal fade" id="infoModal" role="dialog" style="margin-top: 14%">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Row Information</h4>
          </div>
          <div class="modal-body">
            <label>Values: </label>
            <input id="val1" type="text">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

现在这个模态有一个输入框，其中包含id。因此，首先要通过执行以下操作设置其值：$('#val1').val($(this).text());。

设置值后，您需要打开modal。

要在.click()功能中打开模式，请在设置值后执行$('#infoModal').modal('show');。这将在输入框中打开带有行值的模态。

希望这会有所帮助。如果它没有，它肯定会帮助你实现你想要的。

带有可编辑信息的模态窗口和引导程序

1 个答案: