javascript - 为什么单击 div 标签中的按钮时会反射(reflect)数据？

Question

我用模态设计了表格。在这里，当我单击签名按钮时，模态与表格中的第一行数据一起弹出，反射(reflect)在表格上，如数据阴影。我对关闭 div 感到困惑。我想我放错了 div 结束标记。 Modal 运行良好。Modal 处理数据正常，

<style>
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

</style>

   
    
        
        
            <div class="row">
                
            <div class="panel panel-default">
                       
            <div class="panel-body pn">                            

            <div style="overflow-x:auto;">
             <br>
            <div class="table-responsive mbn">         
            <table class="table table-bordered mbn">
            <div class="panel-heading">
            <span class="panel-title">
            <span class="fa fa-table"></span><font color="red">ex</font></span>
            
            </div>
 
    <tr>
      <th><font color="red" size="2">Ref</font></th>
      <th><font color="red" size="2">Da</font></th>
     
	   <th><font color="red" size="2">sined</font></th>
	 
   		   
     		 <tr>			
			<td>></td>
			<td></td>
			 Details </a></td>
			<td> EDIT </a></td>	
		    
		    <td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
			</tr>


 		 </table>
   </div>
   			
             

 		<div id="myModal" class="modal fade">
    		<div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">List s</h4>
            </div>
            <div class="modal-body">
            
              <div class="table-responsive mbn">         
            <table class="table table-bordered mbn">
 
    <tr>
      <th width="70"><font color="red" size="2">Sl</font></th>
      <th><font color="red" size="2">Name</font></th>
     <th width="90"><font color="red" size="2"></font></th>
     
      </tr>
      
      <tr>
      <td>1</td>
			<td>I</td>
   <td> <input type="checkbox" name="assign" value="Bike"></td>
			
      </tr>
      
      </table>
     
     
            
           
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info">Submit</button>
            </div>
             
             	    
            </div>
            </div>
            </div>
            </div>
		  
          

            
        <!-- /.modal-content -->
					
         
		
		</div>
        </div>
	    </div>
	    </div>
        </div>
        

请帮忙

Answer 1

您有不匹配的 A 标签和缺少的 TD 标签。在这里它被清理并工作: https://jsfiddle.net/DTcHh/41416/

<style>
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }
</style>




<div class="row">

    <div class="panel panel-default">

        <div class="panel-body pn">

            <div style="overflow-x:auto;">
                <br>
                <div class="table-responsive mbn">
                    <div class="panel-heading">
                        <span class="panel-title">
                            <span class="fa fa-table"></span><font color="red">ex</font>
                        </span>

                    </div>
                    <table class="table table-bordered mbn">


                        <tr>
                            <th><font color="red" size="2">Ref</font></th>
                            <th><font color="red" size="2">Da</font></th>

                            <th><font color="red" size="2">sined</font></th>


                        <tr>
                            <td></td>
                            <td></td>
                            <td><a>Details </a></td>
                            <td> <a>EDIT </a></td>

                            <td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
                        </tr>


                    </table>
                </div>



                <div id="myModal" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">List s</h4>
                            </div>
                            <div class="modal-body">

                                <div class="table-responsive mbn">
                                    <table class="table table-bordered mbn">

                                        <tr>
                                            <th width="70"><font color="red" size="2">Sl</font></th>
                                            <th><font color="red" size="2">Name</font></th>
                                            <th width="90"><font color="red" size="2"></font></th>

                                        </tr>

                                        <tr>
                                            <td>1</td>
                                            <td>I</td>
                                            <td> <input type="checkbox" name="assign" value="Bike"></td>

                                        </tr>

                                    </table>




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


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




                    <!-- /.modal-content -->



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