jquery - 单击表行以在复选框中追加值

时间:2015-08-03 13:43:22

标签: javascript jquery html json

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);
    });
  });

  

});
&#13;
<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>
&#13;
&#13;
&#13;

从数据库中提取的JSON值

{
  "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
    }
  ]
}

您好。

下面这段代码在表格行中进行选择,以在文本字段中显示值。

    $(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);
    });
  });



});

单击表格行时,我需要在复选框中显示选中的值。根据行中选择的ID,将在复选框中选中特定值。这些值是通过JSON文件从数据库中提取的。我应该使用值(data.tarifOptionId

来提取它

我认为应该将它放在循环中,以便在单击每个表行时增加id值。输入的id为#option_tarif_chk_,并嵌入cforeach循环中。

我在下面写了这样的话:

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

但它不起作用。警报返回Uncaught TypeError: Cannot read property '0' of undefined

非常感谢任何帮助。

谢谢

1 个答案:

答案 0 :(得分:0)

好的,我设法用以下代码完成:

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

                });

但现在的问题是,如何从JSON中获取其他值,我必须将其初始化为0 tarifTypeOptionList[0],而后者只返回第一个值

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

注意:我使用.prop()方法在复选框中进行选择。