从动态创建的对象中获取第一个兄弟级<td>内部的输入值

Question

我从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单击button时，我希望从第一个td中获得button的值：

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

我做错了什么？这里就是它的样子。

Answer 1

尝尝这个。首先，必须将输入引用留给TD。而不是从TD得到所有的TDs之前和最后一个(那将是第一个表从右向左)，然后进入它，以找到复选框！

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

Answer 2

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

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