从 html 表的行中预填充表单字段，并从 json 文件中接收表数据

Question

我指的是链接上发现的问题 Pre-populate form fields from the html table's row on which it is clicked.(all this is supposed to happen on jsp)

那里的json是内联的：

var tableData = [
        {
          value1: "row1-v1",
          value2: "row1-v2",
          value3: "row1-v3",
          value4: "row1-v4"
        }, {
          value1: "row2-v1",
          value2: "row2-v2",
          value3: "row2-v3",
          value4: "row2-v4"
        }
      ];

我想要的是让这个 json 外部化并通过 ajax 和 jquery 链接它。

我正在使用的代码：

HTML

<div class="container">

    <!-- start of row -->
    <div class="row">
        <div class="col-sm-8">

            <br />
            <center><span class="tbltxt">LISTE DES TARIFS EXISTANTE</span></center>
            <br />

            <div class="table-responsive">
            <table class="table tg" style="table-layout: fixed; width: 745px">
                <colgroup>
                <col style="width: 249px">
                <col style="width: 249px">
                <col style="width: 249px">

                </colgroup>

                <thead>
                    <tr>
                       <th class="tg-s6z2 bdleft">NOM</th>
                       <th class="tg-s6z2">CODE</th>
                       <th class="tg-s6z2">PRIX PAR DEFAUT</th>
                    </tr>
                </thead>
                <tfoot>
                </tfoot>
                <tbody>
                    <tr>
                    <td colspan="5">
                        <div class="scrollit">
                            <table class="table tg" style="table-layout: fixed;">
                                <colgroup>
                                <col style="width: 240px">
                                <col style="width: 240px">
                                <col style="width: 240px">
                                </colgroup>

                                <c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">  
                                    <tr id="tb2">
                                    <td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
                                    <td class="tg-s6z2">${type_tarif.code}</td>
                                    <td class="tg-s6z2 bdryt">${type_tarif.montantTarifDefaut}</td>
                                  </tr>
                                </c:forEach>
</table>
                        </div>
                    </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>

        <div class="col-sm-4" style="background-color: #f7f7f7; height: 800px;">

            <div>

                <center>
                    <form class="form-horizontal" style="padding-top: 57px;">
                        <div class="form-group">
                            <label for="inputName" class="control-label col-xs-2">NOM:</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control styletxtbox value1" id="inputName" style="width: 211px !important;">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputCode" class="control-label col-xs-2">CODE:</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control styletxtbox value2" id="inputCode" style="width: 211px !important;">
                            </div>
                        </div>
                        <hr class="style-two">
                        <center>
                        <div class="form-group">
                            <label for="inputTarif" class="control-label col-xs-2">Tarif par défaut:</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control styletxtbox value3" id="inputTarif" style="width: 211px !important;">
                                </div>
                        </div>
                        </center>
                    </form>
                </center>

                <hr class="style-two">


                <div id="scrollit">
                    <form class="form-horizontal" style="margin: 0 auto; width: 115px;">
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="petitdejeuner" class="styled">Petit Déjeuner
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="parking" class="styled">Parking
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Piscine" class="styled">Piscine
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Bar" class="styled">Bar
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Climatisation" class="styled">Climatisation
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="petitdejeuner" class="styled">Petit Déjeuner
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="parking" class="styled">Parking
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Piscine" class="styled">Piscine
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Bar" class="styled">Bar
                            </label>
                        </div>
                        <div class="checkbox1">
                            <label>
                                <input type="checkbox" name="service" value="Climatisation" class="styled">Climatisation
                            </label>
                        </div>
                    </form>
                </div>

            </div>

            <br /><br />

            <div>
                <center>
                    <p>
                        <button type="button" class="btn btn-default btn-sm">Annuler</button>
                        <button type="button" class="btn btn-default btn-sm">Valider</button>
                    </p>
                </center>
            </div>

        </div>
    </div>
    <!-- end of row -->

    <!-- start of row -->
    <div class="row">

    </div>
    <!-- end of row -->

</div>
<!-- end of page content -->

<!-- jQuery -->
<script type="text/javascript" src="js/default.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JS

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */



/* global tableData */

$(function() {

        $.ajax({
          url: 'json/pricesinputjson.json', // path to file
          dataType: 'text', // type of file (text, json, xml, etc)
          success: function(data) { // callback for successful completion
               var json = $.parseJSON(data); 
                $(data).html(tableData);
          },
          error: function (xhr, status, error) { 
              alert("Error:" + status + ':' + error + ':' + xhr.responseText); 
          }
        });     





      var rows = $.map(tableData, function(rowData) {
        var row = $("<tr></tr>");
        row.append($('<td class="class1"></td>').html(rowData.value1));
        row.append($('<td class="class2"></td>').html(rowData.value2));
        row.append($('<td class="class3"></td>').html(rowData.value3));

        row.on("click", function() {
          fillForm(rowData);
        });

        return row;
      });

      $(".table").append(rows);

      function fillForm(rowData) {
        var form = $(".form-horizontal");

        form.find("input.value1").val(rowData.value1);
        form.find("input.value2").val(rowData.value2);
        form.find("input.value3").val(rowData.value3);
      }
});

JSON

[
    {
    "value1": "Suite",
    "value2": "0001",
    "value3": "150.00"
    }
, 
    {
    "value1": "Tarif Public",
    "value2": "0002",
    "value3": "500.00"
    }
]

所以基本上，我需要做的是，当我点击表格的表格行时，数据应该填充到表单字段中。

现在将出现在表中的数据将来自一个 json 文件，该文件应该是外部的而不是内部的。

我主要需要js部分的帮助。

Answer 1

您几乎拥有一切，一旦页面加载，var json = $.parseJSON(data); 就会填充您的 json 数据。
从那里你只需要遍历json 并绑定数据。

$.ajax({
    url: 'json/pricesinputjson.json', // path to file
    dataType: 'text', // type of file (text, json, xml, etc)
    success: function(data) { // callback for successful completion
       var json = $.parseJSON(data);
       var table = $(".table");
       for(var i = 0; i < json.length; ++i) {
           // here you bind data
       }
   },
   error: function (xhr, status, error) { 
       alert("Error:" + status + ':' + error + ':' + xhr.responseText); 
   }
});

我也不确定你的表格中的哪个单元格应该映射到某个东西，我让你提供更清晰的信息（只将 html 清理到相关部分）或者从这个例子中进行绑定。