0

我正在尝试将 HTML 表格数据显示为详细信息表单。但是我遇到了错误ReferenceError: showDetails is not defined

下面是我的 HTML 代码和 java 脚本代码：

<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>

    <style type="text/css">
        body { font-family: Verdana; font-size: 12pt; }
        .container { width: 35%; margin: 0 auto; }
        .search_box { padding: 1.5%; font-family: Verdana; font-size: 12pt; }
    </style>


    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
    var driverdata = null;

    function showDetails(data){
       var form = $(this).parents('form:first');

       URL = "http://localhost:8888/drivers/find/"+id;
       driverdata = data;

       var cont = data;
    //alert(JSON.stringify(cont));




        $("#id").val(''+cont.id);
        $("#firstname").val(''+cont.firstName);
        $("#lastname").val(''+cont.lastName);
        $("#licenseid").val(''+cont.licenseId);
        $("#telephone").val(''+cont.telephone);
        $("#email").val(''+cont.email);




   }




    function doSearch() {
        var searchText = document.getElementById('searchTerm').value;
        var targetTable = document.getElementById('mytable');
        var targetTableColCount;

        //Loop through table rows
        for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
            var rowData = '';

            //Get column count from header row
            if (rowIndex == 0) {
                targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
                continue; //do not execute further code for header row.
            }

            //Process data rows. (rowIndex >= 1)
            for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
                var cellText = '';

                if (navigator.appName == 'Microsoft Internet Explorer')
                    cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
                else
                    cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;

                rowData += cellText;

            }

            //If search term is not found in row data
            //then hide the row, else show
            if (rowData.indexOf(searchText) == -1)
                targetTable.rows.item(rowIndex).style.display = 'none';
            else
                targetTable.rows.item(rowIndex).style.display = 'table-row';
        }
    }




            var ajax_load = "loading...";

        var loadUrl = "TestPage.htm #dvContainer"; //load part of page
        $(document).ready(function () {
            //editableGrid.onloadJSON("editablegrid/examples/full/datasource/demo.json");  
            $('#tooltip').delay(2000).fadeIn(1200);
            $("#load_basic").click(function () {
                $("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $("#dvError").html(msg + xhr.status + " " + xhr.statusText);
                    }
                }
                );
                return false;
            });


            window.onload = fun;
            function fun(){
                $("#dvAjax").html(ajax_load);


                $.ajax({
                    type: "GET", //GET or POST or PUT or DELETE verb
                    url: "http://localhost:8888/drivers/listAll", // Location of the service
                    success: function (data) {//On Successfull service call


var txtStr = '<table class="datatable"><thead><tr> <th>id</th> <th>firstName</th> <th>lastName</th> <th>licenseId</th> <th>telephone</th> <th>email</th> </tr></thead><tbody>';

for(var i = 0; i < data.length; i++) {

     txtStr += '<tr class="gradeA"> <td><a class="edit_row" href="#tab2" onclick="showDetails(\''+data[i].id+'\');"><span>'+data[i].id+'</span></a></td> <td>'+data[i].firstName+'</td> <td>'+data[i].lastName+'</td> <td>'+data[i].licenseId+'</td> <td>'+data[i].telephone+'</td> <td>'+data[i].email+'</td> </tr>';

    //txtStr = txtStr + '<tr><td>' + json[i].id + '</td><td>' + json[i].firstName + '</td><td>' + json[i].lastName + '</td><td>' + json[i].licenseId + '</td><td>' + json[i].telephone + '</td><td>' + json[i].email + '</td><tr>';

     }

     txtStr += '</tbody></table>';
       $("#tab1").html(txtStr);

     $('.datatable').dataTable({
         'sPaginationType':'full_numbers'    
     });




     document.getElementById('somerow').innerHTML = txtStr;

                    },
                    error: ServiceFailed// When Service call fails
                });


                return false;
            };



        });





        function ServiceFailed(xhr) {
            alert(xhr.responseText);
            if (xhr.responseText) {
                var err = xhr.responseText;
                if (err)
                    error(err);
                else
                    error({ Message: "Unknown server error." })
            }
            return;
        }
    </script>
</head>
<body>
    <!-- <form id="btnAjax" --> 


    <!-- <table id="mytable" -->

    <!-- </table-->

    </form>
</body>






                           <h2>View Drivers</h2>   </br>  


                                        <div class="table" id="tab1"> 

                                            <table class="basic-table" id="mytable">
                                                <thead>



                                         <tr>              
                                        <td><label >Id</label></td>
                                        <td align="left"><input type="text" id="Id" class="medium" name="" value=""></td>
                                        </tr>

                                    <tr>
                                        <td><label>FirstName</label></td>
                                        <td align="left"><input type="text" id="firstName" class="medium" name="" value=""></td>

                   </tr>               
                   <tr>  
                                        <td><label>LastName</label></td>
                                        <td align="left"><input type="text" id="lastName" class="medium" name="" value=""></td>

                                   </tr>
                                   <tr>
                                        <td><label >licenseId</label></td>
                                        <td align="left"><input type="text" id="licenseId" class="medium" name="" value=""></td>

                                    </tr>
                                    <tr>
                                        <td><label>Telephone</label></td>
                                        <td align="left"><input type="text" id="Telephone" class="medium" name="" value=""></td>
                                    </tr>
                                    <tr>
                                        <td><label>Email</label></td>
                                        <td align="left"><input type="text" id="Email" class="large" name="" value=""></td>


                                    </tr>




                                                </thead>


                                                </table>

                                                 <label for="search"> <strong>Search Box</strong>
                        </label> <td alihn="left"><input type="text" id="searchTerm" size="20" width="20" onkeyup="doSearch()" />

                                                </div>





                                <h2>Update Drivers</h2> </div> </br> </br>




                        <div class="tab" id="tab2">
                        <form id="search" action="search" name="search" class="horizontal-form">
                            <!-- Inputs -->
                            <!-- Use class .small, .medium or .large for predefined size -->



                                    <tr>
                                        <td><label >id</label></td>
                                        <td><input type="text" id="id" class="medium" name="" value=""></td>

                                    </tr>
                                    <tr>
                                        <td><label>firstName</label></td>
                                        <td><input type="text" id="firstname" class="medium" name="" value=""></td>

                                    </tr>
                                    <tr>
                                        <td><label>lastName</label></td>
                                        <td><input type="text" id="lastname" class="medium" name="" value=""></td>

                                    </tr>
                                    <tr>
                                        <td><label >licenseId</label></td>
                                        <td><input type="text" id="licenseid" class="medium" name="" value=""></td>

                                    </tr>

                                    <tr>
                                        <td><label>telephone</label></td>
                                        <td><input type="text" id="telephone" class="medium" name="" value=""></td>
                                    </tr>
                                    <tr>
                                        <td><label>email</label></td>
                                        <td><input type="text" id="email" class="large" name="" value=""></td>


                                    </tr>



                                    <tr>
                                       <td colspan="2"><button id="submit" type="button" onClick="Submit();" />Submit</button> or <a href="#">Cancel</a></td>


                                    </tr>





                            </fieldset>
                            </form>
                            </div>







                </html>

我想将 HTML 表格数据显示为详细信息表单。请帮我找出我犯了什么错误。谢谢..

4

3 回答 3

0

您的问题不够清楚，无法为您提供适当的解决方案。我假设这cont是一个全局对象，我不知道是什么$("#detailview").click();。您必须在这里理解的第一个重要想法是您尝试更新的元素是表单字段（输入类型）。据我所知，输入类型元素不支持.html()功能（如果我错了，请纠正我）。因此，如果您想为这些表单字段分配一些值，您必须使用.attr()or.prop()或val()。试试下面的脚本。

function ShowDetails(id){    
   $("#id").val(''+cont.id);
   $("#firstName").val(''+cont.firstName);
   $("#lastName").val(''+cont.lastName);
   $("#licenseId").val(''+cont.licenseId);
   $("#telephone").val(''+cont.telephone);
   $("#email").val(''+cont.email);
}

但是请记住，您必须理清cont这里的内容，因为这里仍然cont很模糊。

于 2013-03-14T03:57:55.283 回答
0

Javascript 区分大小写。

显示详细信息与显示详细信息？

你想要这样的东西：

txtStr += '<tr class="gradeA"> <td><a class="edit_row" href="#tab2" onclick="showDetails('+json[i]');"><span>'+json[i].id+'</span></a></td> <td>'+json[i].firstName+'</td> <td>'+json[i].lastName+'</td> <td>'+json[i].licenseId+'</td> <td>'+json[i].telephone+'</td> <td>'+json[i].email+'</td> </tr>';

showDetails(obj){
    var cont = obj;
    //other code
}

我很确定这不会那样工作，因为 json[i] 不会像你想要的那样被附加。我不记得没有测试你是否可以那样做，但基本上这就是你想要的。$this或者，您可以使用事件处理程序上的方法来获取数据。无论哪种方式，我都会将这个问题的答案标记为正确并提出一个新问题，因为您现在需要解决不同问题的帮助。

于 2013-03-14T03:31:04.103 回答
0

试试这个，让我知道它是否有效

        var ShowDetails = function(id){

        $("#id").html(''+cont.id);
        $("#firstName").html(''+cont.firstName);
        $("#lastName").html(""+cont.lastName);
        $("#licenseId").html(""+cont.licenseId);
        $("#telephone").html(""+cont.telephone);
        $("#email").html(""+cont.email);

        $("#detailview").click();

}

于 2013-03-14T04:14:00.897 回答