Question

我正在根据用户的输入数字在模态表中生成动态文本框，但该表将不应用jquery。...

这是用于生成表格和动态文本框的脚本

 <script type="text/javascript">

    $(document).ready(function () {
        $('#textInput').keyup(function () {

            try {
                debugger
                $('#divDynamicTexts').empty();
                var txt = $('#textInput').val();
                var table = '<table id="tblComponentes" class="table table-bordered table-striped dataTable">'
                          + '<thead>'
                          + '<th>Componente</th>'
                          + '<th>Base</th>'
                          + '<th>Comprimento</th>'
                          + '</thead>'
                          + '<tbody>';

                for (var i = 0; i < txt; i++) {
                    table += '<tr><td><input type="text" id="txtComponente' + i + '"/></td>' + '<td><input type="text" id="txtBase' + i + '" value="" /></td>' + '<td><input type="text" id="txtComprimento' + i + '" value="" /></td></tr>';
                }

                table +=
                      + '</tbody>'
                      + '</table>';

                $('#divDynamicTexts').html(table);

                $('#myModal').modal('show');
            }
            catch (err) {
                $('#modal-body').html(err);
            }
        })
    });


    $(document).ready(function () {
        $('#tblComponentes').DataTable();
    });


</script>

参考

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="../AdminLTE/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../AdminLTE/plugins/datatables/jquery.dataTables.js"></script>
<script src="../AdminLTE/plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- AdminLTE App -->
<script src="../AdminLTE/dist/js/adminlte.min.js"></script>

在这里，我称其为模态。生成文本框效果很好，但数据表无法获取jquery，似乎该类正在运行，但jquery无法运行。

用于用户输入的文本框

<input type="text" id="textInput" />

模态如何

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

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

            <!-- Modal body -->
            <div class="modal-body">
                <div id="divDynamicTexts"></div>
            </div>

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

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

html表不会获取数据表jQuery

0 个答案: