JSON - 从表链接填充表单

时间:2014-05-22 13:03:11

标签: jquery json hyperlink html-table dynatable

我接近这边,所以任何帮助都会非常感激。我试图使每行数据成为可点击链接,该链接将是JSON数据中的id。这背后的想法是,一旦用户点击链接,代码就会在我的应用的另一个页面上填充表单。

我在使用Actionscript多年后才开始学习Jquery,而且目前还不顺利。

JSON DATA

var data = [
{ 
    "code" : "SF700JR",
    "color" : "Orange",
    "description" : "RAL 2000",
    "finish" : "Smooth",
    "gloss" : "Satin",
    "id" : "uk1",
    "series" : "D1036"
  },
    {
    "code" : "YA602GF",
    "color" : "White",
    "description" : "RAL 9016",
    "finish" : "Smooth",
    "gloss" : "Gloss",
    "id" : "uk2",
    "series" : "D2525 SD"
  },
  { "code" : "YA604GF",
    "color" : "White",
    "description" : "RAL 9018",
    "finish" : "Smooth",
    "gloss" : "Gloss",
    "id" : "uk3",
    "series" : "D2525 SD"
  }
]

JQUERY

  var dynatable = $('#my-final-table').dynatable({
    features: {
      paginate: false,
      recordCount: false,
      sorting: false,
      search: false
    },
    dataset: {
      records: data
    }
  }).data('dynatable');

  $(data).each(function(index, value) {
    var row_content = $('<a href="#">' + value.id + '</a>');
    value.id = row_content;
    console.log(row_content);
    $('#my-final-table tr').append('<a href="#">'+value.color+'</a>').data(value);

    $('#my-final-table tr a').on('click', function(){
      console.log("click");
    });
  });

HTML

<div class="ui-grid-solo"><p></p>
    <div class="ui-block-a">
    <table id="my-final-table" class="product-table" style="width:100%">
        <thead>
            <th class="table-heads">Description</th>
            <th class="table-heads">Code</th>
            <th class="table-heads">Series</th>
            <th class="table-heads">Color</th>
            <th class="table-heads">Gloss</th>
            <th class="table-heads">Finish</th>
            <th class="table-heads">ID</th>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
</div>

0 个答案:

没有答案
相关问题