Dynamische Textfeld-Erstellung in einem Bootstrap-Modal

Ich versuche, ein Webformular zum Abrufen von Markierungen zu erstellen. Hier ist mein Code Ich versuche, einige Eingaben in das Bootstrap-Modal zu bekommen. Ich habe eine Schaltfläche im Modal für die dynamische Textboxerstellung beibehalten. Während ich auf den Knopf klicke, tritt ein Problem auf, wie die Boxen ihre Reichweite überschreiten. Also bitte hilf mir das Problem zu lösen. Vielen Dank im Voraus ... :-)Dynamische Textfeld-Erstellung in einem Bootstrap-Modal

<body> 

<div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- 
target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times; 
</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     <button id="cli" onclick="ctab()">+</button> 
     <div id="mt"> 
      <table id="mtable"> 
      <tbody id="mbody"> 
       <tr id="mrow"></tr> 
      </tbody> 
      </table> 
     </div> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button> 
    </div> 
    </div> 

</div> 
</div> 

</div> 
<script type="text/javascript"> 
function ctab(){ 

var mrows=document.getElementById("mrow"); 
var data=document.createElement("td"); 
var tdata=document.createElement("input"); 
tdata.setAttribute("type","text"); 
data.appendChild(tdata); 
mrows.appendChild(data); 


} 

</script> 
</body>

This is my webpage screenshot

Quelle

2017-11-20 Badhusha

try it 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <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.2.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>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     <button id="cli" onclick="ctab()">+</button> 
     <div id="mt"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <table id="mtable"> 
      <tbody id="mbody"> 

      </tbody> 
      </table> 
       </div> 
      </div> 

     </div> 

    </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 


<script type="text/javascript"> 
function ctab(){ 

var mrows=document.getElementById("mbody"); 
var rdata=document.createElement("tr"+"br"); 
var data=document.createElement("td"); 
var tdata=document.createElement("input"); 
tdata.setAttribute("type","text"); 
rdata.appendChild(tdata); 
mbody.appendChild(rdata); 


} 

</script> 
</body> 
</html>

Quelle

2017-11-20 05:11:37

Danke sehr viel .... ;-) – Badhusha

Dynamische Textfeld-Erstellung in einem Bootstrap-Modal

Antwort

Verwandte Themen