Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

javascript - 如何在输入中显示所选行的信息？(how to display information of a selected line in inputs?)

0 votes
255 views
in Technique[技术] by (71.8m points)

javascript - 如何在输入中显示所选行的信息？(how to display information of a selected line in inputs?)

Here is my problem I want when I click on a button that is in a row of an html array, the information of the select line is displayed in inputs and it is not editable.

(这是我想要的问题，当我单击html数组行中的按钮时，选择行的信息显示在输入中，并且不可编辑。)

Here is my interface to better understand:

(这是我的界面，可以更好地理解：)

Home locataire

(家庭旅馆)

I want that when I click on reserve the following modal is displayed, and the modal stock inputs the information of the selected line, here is my modal:

(我希望当我单击“储备金”时显示以下模态，并且模态库存输入所选行的信息，这是我的模态：)

Modal

(模态)

the problem is that I really do not know how to do that with code.

(问题是我真的不知道如何用代码来做到这一点。)

here is the code of my page jsp if need:

(如果需要，这是我的页面jsp的代码：)

    <%@page import="controller.Cnx"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.Map"%>

<!DOCTYPE html>
<%

Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Interface locataire</title>
    <meta name="description" content="Sufee Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
    <link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
    <link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">


    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="css/Css_acceuil_locataire.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>


    </head>
    <body>

        <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">

            <div class="navbar-header">

                <a class="navbar-brand" href="#">Gestion parkings</a>
                <a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">


                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation</a>

                    </li>
                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation</a>

                    </li>



                </ul>
            </div>
        </nav>
    </aside>



    <nav class="navbar" style="height:70px;" id='nav-proprietaire'>
        <ul class="nav navbar-nav">
            <li class="nav-item ">
                        <a href="Page_de_cnx" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="padding-left: 1430px; text-transform: uppercase"> <i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection</a>

                    </li>
        </ul>
    </nav>


        <label id="label1">Liste des places disponibles avec leurs emplacements :</label>

        <table class="table table-hover" style="margin-top: 20px;" id="table1">
  <thead>
    <tr class="table-active">
      <th scope="col">Nom local</th>
      <th scope="col">Numéro place</th>
      <th scope="col">Prix par heure</th>
      <th scope="col">Taille</th>
      <th scope="col">Action</th>


    </tr>
     </thead>
     <%while(re.next()){%> 
     <tr>

            <th scope="row"><%=re.getObject(2)%></th>
            <td><%=re.getObject(3)%></td>
            <td><%=re.getObject(4)%></td>
            <td>><%=re.getObject(5)%></td>
            <td>><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" onclick="afficher()"><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
     </tr>


      <%}%>

  <tbody>





  </tbody>

</table>
   <div class="modal" id="reservation">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
         <form method="POST" action='Place_locaux'>
            <div class="form-group">
                <label class='labelproprietaire'>Nom du local approprié à la place :</label>
                <select class="browser-default custom-select" placeheader="Search here.." name="nom_local" required disabled>


                        <%while(re2.next()){%>
                        <option><%=re2.getObject(2)%></option>
                        <%}%>
                </select>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Numéro place :</label>
                <input type="number" class="form-control" id="numeroplace"  name="numeroplace" required>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Prix par heure:</label>
                <input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" required>

            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Taille de la place :</label>
                <input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" required>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Votre Cin :</label>
                <input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Heure début de la réservation :</label>
                <input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>

            </div>

            <div class="form-group">
                <label class='labelproprietaire'>Heure fin de la réservation :</label>
                <input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>

            </div>






        </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">

         <div id='divbtnaddplace'>      
                <button type="submit" class="btn btn-primary btn-lg" id='btnreserver' style='vertical-align: 0; margin-right: 260px;' name='action' value='reserver'>Reserver</button>


           </div>
        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
      </div>

    </div>
  </div>
</div>     


        <script src="vendors/jquery/dist/jquery.min.js"></script>
    <script src="vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/main.js"></script>


    <script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/widgets.js"></script>
    <script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    </body>
</html>

and this is my javascript code :

(这是我的javascript代码：)

<script>

    var table= document.getElementById('table1');

    for(int i=1; i<table.rows.length; i++){
        function afficher(){
         document.getElementById('nom_local').value=this.cells[0].innerHtml;
         document.getElementById('numeroplace').value=this.cells[1].innerHtml;
         document.getElementById('prixplace').value

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Add a class to your reserve button and bind an on click event handler to your button.

(将类添加到您的预定按钮，并将on click事件处理程序绑定到您的按钮。)

From there, you can pull the data from that row and populate your modal's fields.

(从那里，您可以从该行中提取数据并填充模态字段。)

Here's an example using JQuery:

(这是使用JQuery的示例：)

$(document).ready(function() {
    $('.reserve').on('click', function(e) {
        var rowData = $(this).parent().parent().children();
        $('#nom_local').val($(rowData).eq(0).text());
        $('#numeroplace').val($(rowData).eq(1).text());
        $('#prixplace').val($(rowData).eq(2).text());
        $('#tailleplace').val($(rowData).eq(3).text());
    });
});

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...