【问题标题】:JQuery table.append not showingJQuery table.append 不显示
【发布时间】:2017-11-28 09:06:11
【问题描述】:

我是 Web API 和 Jquery/AJAX 的新手,我无法找到我的代码有什么问题,它正确显示了表格但没有添加我要添加的表格行,这是我的代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
    <div class="well">
        <input type="button" class="btn btn-success" id="btnLoadEmp" value="Load Employees"/>
    </div>
    <div class="well hidden" id="divData">
        <table class="table table-bordered" id="tblData">
            <thead>
                <tr>
                    <th>Employee ID</th>
                    <th>Employee Name</th>
                    <th>Gender</th>
                    <th>Age</th>
                    <th>Department ID</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody id="tblBody"></tbody>
        </table>
    </div>
        <div class="modal fade" tabindex="-1" id="exprModal" data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4>Session Expired</h4>
                    </div>
                    <div class="modal-body">
                        <h2>Session expired please login again.</h2>
                    </div>
                    <div class="modal-footer">
                        <a href="LogIn.html" class="btn btn-success">Go to     Log In</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="divError" class="alert alert-danger collapse">
            <a id="divClose" class="close" href="#">&times;</a>
            <div id="divErrorText"></div>
        </div>
</div>


<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (sessionStorage.getItem('accessToken') == null) {
            window.location.href = 'LogIn.html';
        }

        $('#divClose').click(function () {
            $('#divError').hide('fade');
        });
        $('#btnLoadEmp').click(function () {
            $.ajax({
                url: '/api/employee',
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + sessionStorage.getItem('accessToken')
                },
                success: function () {
                    $('#divData').removeClass('hidden');
                    $.each(data, function (index, value) {
                        var row = $('<tr><td>' + 'test' + '</td><td>'
                            + 'test' + '</td><td>'
                            + 'test' + '</td><td>'
                            + 'test' + '</td><td>'
                            + 'test' + '</td><td>'
                            + 'test' + '</td></tr>');

                        $('#tblData').append(row);

                    });
                },
                error: function (jqXHR) {
                    $('#divErrorText').text(jqXHR.responseText);
                    $('#divError').show('fade');
                }
            });
        });
    });
</script>
</body>
</html>

我有表 id tblData 并且我正确地调用了 id。不知道怎么回事

【问题讨论】:

    标签: jquery html asp.net ajax api


    【解决方案1】:

    找了将近一个小时后,我尝试查看谷歌浏览器的开发工具,发现错误uncaught referenceerror: data is not defined,所以我检查了我的代码,发现在代码行success: function ()中我没有定义data所以在将其更改为success: function(data) 后,我的代码现在可以正常工作了。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-03-14
      • 2011-02-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多