从动态创建的对象中获取第一个兄弟中的输入值

时间:2014-02-20 11:36:40

标签: jquery html5 twitter-bootstrap events

我是从json创建的对象:

var url = "<?php echo base_url('dashboard/admin/getPropertyList');?>";
$.getJSON(url, function(data) {
if(data === false) {
  var msg = 'No result';
  $('#table-panel-body').html(msg);
}else {
    var table_body = '<table id="property-table" class="table table-hover">' +
    '<thead><tr>' +
    '<th>' + "<?php echo nbs();?>" + '</th>' +
    '<th>Model Name</th>' +
    '<th>Bed</th>' +
    '<th>Bath</th>' +
    '<th>Floor</th>' +
    '<th>Lot</th>' +
    '<th>Price</th>' +
    '<th>Type</th>' +
    '<th>Modified</th>' +
    '<th>' + "<?php echo nbs();?>" + '</th>' +
    '</tr></thead>' +
    '<tbody id="property-list"></tbody>' +
    '</table>';
  $('#table-panel-body').after(table_body);
  $.each(data, function(key, value) {
    var checkbox = '<tr><td><input class="checkbox" type="checkbox" value="',
      td = '</td><td>',
      td_buttons = 
      '<button class="btn btn-warning edit" data-target="#edit-modal" data-toggle="modal" data-id="edit">' + 
      '<span class="glyphicon glyphicon-edit"></span>' + 
      '</button>' + 
      "<?php echo nbs();?>" +
      '<button class="btn btn-info" data-target="#add-slide" data-toggle="modal" data-id="slide">' + 
      '<span class="glyphicon glyphicon-picture"></span>' + 
      '</button>' + 
      "<?php echo nbs();?>" +
      '<button class="btn btn-primary" data-target="#add-tags" data-toggle="modal" data-id="tags">' + 
      '<span class="glyphicon glyphicon-tags"></span>' + 
      '</button>' + 
      '</td></tr>';
    $( 
      checkbox + value.p_id + '"/>' + td +
      value.model_name + td +
      value.bed + td +
      value.bath + td +
      value.floor + td +
      value.lot + td +
      value.min_price + td +
      value.property_type + td +
      value.modified + td +
      td_buttons).appendTo('#property-list');
      });
    }
}); // End list populate properties

现在,当我使用以下内容点击上一个input中的td时,我想从第一个button获取td的值:

// I wrapped the table in an id because I think it's more efficient
$('#main-panel').on('click', 'button[data-id="edit"]', function() {
var inputValue = $(this).siblings('td').find('input.checkbox').val();
console.log(inputValue);
});

我做错了什么? Here就是它的样子。

2 个答案:

答案 0 :(得分:2)

试试这个。首先,您必须从输入参考离开TD。 TD之前获得所有的TD并获得最后一个(这是从右到左的第一个表格),然后进入它以找到复选框!

$('#main-panel').on('click', 'button[data-id="edit"]', function() {
    var jqTDs = $(this).closest('td').prevAll('td').last().find('input:checkbox').val();
    console.log(inputValue);
});

或者你可以去TR并找到第一个TD ......

$('#main-panel').on('click', 'button[data-id="edit"]', function() {
    var jqTDs = $(this).closest('tr').find('td:first input:checkbox').val();
    console.log(inputValue);
});

答案 1 :(得分:1)

您应该在父行的第一个td中找到如下所示的复选框:

  

var tr = jQuery(this).closest("tr"); var firstTd = tr.find(':first-child'); var inputValue = firstTd.find("input.checkbox").val();