Javascript jQuery-如何调试jQuery表？

你好

我的表正在处理我之前的3个php文件。一个文件是完全相同的函数/进程，但模式id不同

包括_once“modal\advision.php”；&包括“modal\claim.php”

问题是： 我完全复制了offence.php的代码，并将其粘贴到claim.php 我将claim.php:offensemodel的模式id更改为claimModal，并将一些代码（如attribute）更改为all-input标记

当我打电话给Claimodal时，桌子坏了

下面是offence.php的工作屏幕截图

下面是claim.php的示例

正如您所看到的，分页和搜索文本框已经消失

另外，当点击表格时，表格中的所有数据都会复制到文本框中，但由于表格未正确加载，文本框无法工作

以下是jQuery表的代码：

进攻表

$(document).ready(function () {            
$('#offenseTable').dataTable( {
    "lengthMenu": [[5, -1], [5,"All"]]
} );

var table = $('#offenseTable').DataTable();
$('#offenseTable tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        document.getElementById("offStudID").value = data[1];
        document.getElementById("offStudLN").value = data[2];
        document.getElementById("offStudFN").value = data[3];
        document.getElementById("offStudMN").value = data[4];
        document.getElementById("offSuffix").value = data[5];
        document.getElementById("offStudCourse").value = data[6];
        document.getElementById("offStudLevel").value = data[7];
        // alert( 'You clicked on '+data[3]+'\'s row' );
    } );

}))

和索赔表

$(document).ready(function () {            
$('#claimTable').dataTable( {
    "lengthMenu": [[5, -1], [5,"All"]]
} );

var table = $('#claimTable').DataTable();
$('#claimTable tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        document.getElementById("claimStudID").value = data[1];
        document.getElementById("claimStudLN").value = data[2];
        document.getElementById("claimStudFN").value = data[3];
        document.getElementById("claimStudMN").value = data[4];
        document.getElementById("claimSuffix").value = data[5];
        document.getElementById("claimStudCourse").value = data[6];
        document.getElementById("claimStudLevel").value = data[7];
        // alert( 'You clicked on '+data[3]+'\'s row' );
    } );

}))

注意：HTML和PHP代码是相同的。只是他们的id不一样

将调用模态的当前PHP的代码：

include_once 'modal\createUser.php';
include_once 'modal\maintenance.php';
include_once 'modal\logHistory.php';
include_once 'modal\siteHistory.php';
include_once 'modal\offense.php';
include_once 'modal\claim.php';

至于剧本：

<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/table.js"></script>
<script src="assets/js/custom.js"></script>

---

构建表格的HTML在哪里？我猜您对两个表都使用了相同的div id。@jonmrich添加了一个更新。感谢使用chrome开发者工具的bug此链接可能会有所帮助，请不要复制过去的代码，使其可重用，但您能否解释一下我的其他代码，该代码使用modal with tables？我想不出什么不起作用。请检查我的新更新：更新2

<div class="modal fade" id="offenseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="row">
    <div class="col-sm-9">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="offenseTable">

<div class="modal fade" id="claimModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="row">
    <div class="col-sm-9">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="claimTable">

<script>
    $(document).ready(function () {
        $('#viewClaimTable').dataTable( {
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        } );
    });
</script>