jQuery-单击表行以在复选框中附加值

Question

JS

 $(document).ready(function() { $('.tg tr.data-list-row[name=data-list-row]').click(function() { var currentId = $(this).closest('tr').attr('id'); $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) { $("#current_typetarif_id").val(data.id); $("#inputName").val(data.libelle); $("#inputCode").val(data.code); $("#inputTarif").val(data.montantTarifDefaut); }); }); }); 

 <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: 220px"> <col style="width: 240px"> <col style="width: 240px"> </colgroup> <c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop"> <tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;"> <td class="tg-s6z2 bdleft">${type_tarif.libelle}</td> <td class="tg-s6z2">${type_tarif.code}</td> <td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td> <td class="deleterow bdryt" id="${type_tarif.id}" name="del_button"> <div class="glyphicon glyphicon-remove" title="Supprimer"></div> </td> </tr> </c:forEach> </table> </div> </td> </tr> </tbody> </table> </div> <form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm"> <c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop"> <div class="checkbox1"> <label> <input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">${option_tarif.libelle} </label> </div> </c:forEach> </form> 

JSON value extracted from database

{
  "id": 1,
  "code": "0001",
  "libelle": "TARIF PUBLIC",
  "montantTarifDefaut": 10.00,
  "tarifTypeList": [
    {
      "chambreTypeId": 1,
      "tarifTypeId": 1
    }
  ],
  "tarifTypeOptionList": [
    {
      "typeTarifId": 1,
      "tarifOptionId": 1
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 2
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 3
    }
  ]
}

Hi.

This block of code below make a select in the table row to display values into the texts fields.

    $(document).ready(function() {

  $('.tg tr.data-list-row[name=data-list-row]').click(function() {
    var currentId = $(this).closest('tr').attr('id');
    $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
      $("#current_typetarif_id").val(data.id);
      $("#inputName").val(data.libelle);
      $("#inputCode").val(data.code);
      $("#inputTarif").val(data.montantTarifDefaut);
    });
  });



});

On clicking on the table row, i need to display the checked values in the checkbox. According to the id selected in the rows, specific values will be checked in the checkboxes. Those values are being extracted from a database through a JSON file. I should extract it using the value ( data.tarifOptionId )

I think is should be put it in a loop, so that the id value is incremented when each table row is clicked. The id of the input is #option_tarif_chk_ , and it is embeded in a cforeach loop.

I have written something like this below:

            $.each(data, function(i, item) {
                alert(item.tarifTypeOptionList[0].tarifOptionId);
            });

But it is not working. The alert returns Uncaught TypeError: Cannot read property '0' of undefined

Any help will be much appreciated.

Thank you

Answer 1

Ok i managed to do it with the following code:

$('input[type="checkbox"]').each(function() {
                        $("#option_tarif_chk_" + data.tarifTypeOptionList[0].tarifOptionId).prop('checked', true);

                });

But now the issue is, how to get the other values from the JSON, i had to initialise it to 0 tarifTypeOptionList[0] , which in turns return only the first value

"tarifTypeOptionList": [
    {
      "typeTarifId": 1,
      "tarifOptionId": 1
    },

.

Note: i have used the .prop() method to make the selection in the checkbox.