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

我已经设计了模态表。在这里，当我单击符号按钮时，模态与表格中的第一行数据一起弹出，就像数据阴影一样反映在表格上。我对关闭div感到困惑。我想我将div结束标记放错了位置。模态工作正常。 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>
        

请帮忙

最佳答案

您的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>