Добавить поле выбора динамически в таблицу TD из файла JSON

0

Я хотел бы добавить selectbox в строку таблицы динамически с помощью jquery.

Я получаю значения selectbox из файла data.json.

Пожалуйста, найдите мой код ниже:

function loadlist(selobj, url) {
  $(selobj).empty();
  $.getJSON(url, {}, function (data) {
    $(selobj).append('<option value="0">--Select--</option>');
    $.each(data, function (i, obj) {
      $(selobj).append($('<option value=' + data[i].id + '>' + data[i].name + '</option>'));
    });
  });
}
$(function () {
  loadlist($('select#category_01').get(0), 'data.json');
  //slide Toggle
  $('.expandable-panel-heading').click(function () {
    $('.expandable-panel-content').slideToggle();
    $("#expanderSign").toggleClass("up down");
  });

  //creating row
  var $lastChar = 1, $newRow;
  $get_lastID = function () {
    var $id = $('#search-table tr:last-child td:first-child select').attr("id");
    $lastChar = parseInt($id.substr($id.length - 2), 10);
    $lastChar = $lastChar + 1;
    $newRow = "<tr> \
        <td><select id='category_0" + $lastChar + "' size='1'><option value='0'>--Select--</option></select></td> \ <td valign='top'><input type='text' id='tokenfield_0" + $lastChar + "' name='tokenfield_0" + $lastChar + "' maxlength='255' /></td> \ <td valign='top'><a class='signs addRow'>+</a></td> \
        </tr>"
    loadlist($('select#category_0' + $lastChar).get($lastChar), 'data.json', 'category_0' + $lastChar);
    return $newRow;
  }

  // Add Row
  $(document).on("click", ".addRow", function () {
    if ($lastChar <= 7) {
      $get_lastID();
      $('#search-table tbody').append($newRow);
    } else {
      alert("Only 8 Rows allowed!");
    }
    ;
  });
});

Я хотел вызвать loadlist(), добавляя строку для динамического создания selectbox.

Буду признателен за любую помощь.....

Пожалуйста, найдите мой HTML-код ниже:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agilent LSCA Search :: Paradigm</title>
<script src="/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/jquery.tokeninput.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
<link href="/style.css" type="text/css" rel="stylesheet" />
<link href="/tokens.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div class="expandable-panel" id="cp-1">
<div class="expandable-panel-heading">
<h2><span id="expanderSign" class="arrow up"></span> Try Advance Application Finder       <span class="beta">(BETA)</span></h2>
</div>
<div class="expandable-panel-content">
<div class="content-container">
<table id="search-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><select name="category_01" id="category_01" size="1"></select></td>
<td valign="top"><input type="text" id="tokenfield_01" name="tokenfield_01" /></td>
<td valign="top"><a id="firstRow" class="signs addRow">+</a></td>
</tr>
</tbody>
</table>
</div>
<div class="take-action">
<span class="btn-link"><a href="javascript:void(0);">Clear Filters</a></span>
<span class="btn btn-blue"><strong class="blue">APPLY</strong></span>
</div>
</div>
</div>
</div>
</body>
</html>
  • 0
    можете ли вы обновить вопрос с помощью HTML-кода, который вы написали до сих пор, или jsfiddle
  • 0
    Надеюсь, я обновил HTML-код ....
Показать ещё 6 комментариев
Теги:

1 ответ

0
Лучший ответ

Вот код обновления с json binding jsfiddle

var data = {"DATA":[{"COUNTRYCODE":"1","DESCRIPTION":"USA","COUNTRYID":"211"},{"COUNTRYCODE":"1","DESCRIPTION":"Canada","COUNTRYID":"37"},{"COUNTRYCODE":"1","DESCRIPTION":"Dominican Republic","COUNTRYID":"224"}]};
var tid="";

function bindOptions(){
      $("#"+tid).append(
          data.DATA.map(function (el, i) {
              return $('<option>')
                  .val(el.COUNTRYID)
                  .text(el.DESCRIPTION)
                  .data('DATA', el); // just in case you also want to access COUNTRYCODE
          })
      );  
}
Поделиться
  • 0
    Привет, Дэйв, IE 8 не поддерживает метод .map () ... не могли бы вы сообщить мне альтернативу для обработки .map () в IE8.
  • 0
    проверьте здесь stackoverflow.com/questions/7350912/… и дайте мне знать
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню