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テーブルデータを詳細フォームに表示したいと思います。plsは、私が行った間違いを特定するのに役立ちます。どうも..

4

3 に答える 3

0

Javascriptでは大文字と小文字が区別されます。

showDetailsとShowDetails？

あなたは次のようなものが欲しいです：

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

あなたの質問は、適切な解決策を提供するのに十分明確ではありません。それcontはグローバルオブジェクトだと思いますが、何が何であるかわかりません$("#detailview").click();。ここで理解しなければならない最初の重要な点は、更新しようとしている要素がフォーム フィールド (入力タイプ) であるということです。私が知っているように、入力タイプの要素は.html()機能をサポートしていません（間違っている場合は修正してください）。したがって、これらのフォーム フィールドに何らかの値を割り当てたい場合は、.attr()または.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

これを試してみて、それが機能しているかどうかを教えてください

        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 に答える