文章/答案/技术大牛

发布

社区首页 >问答首页 >具有带引导的可编辑信息的模式窗口

问具有带引导的可编辑信息的模式窗口
EN

Stack Overflow用户

提问于 2018-03-14 13:31:18

回答 1查看 1.2K关注 0票数 0

我在一个项目中工作，其中的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>

php

jquery

html

回答 1

Stack Overflow用户

发布于 2018-03-14 16:59:20

你能做的是在你的'.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');。这将在输入框中打开您的行值的模式。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49270308

复制

相似问题

问具有带引导的可编辑信息的模式窗口
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有带引导的可编辑信息的模式窗口EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有带引导的可编辑信息的模式窗口
EN