Question

我正在尝试创建一个用于获取标记的Web表单。这是我的代码我试图在bootstrap模式中获得一些输入。我在动态文本框创建的模态中保留了一个按钮。当我点击按钮时，出现了一些问题，就像盒子超出了它们的范围。所以请帮我解决问题。在此先感谢...： - ）

 <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

Answer 1

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>

在引导模式中创建动态文本框

1 个答案: