Получить выбранную строку таблицы и функцию использования

Question

Здесь у меня есть DataTable: http://jsbin.com/OJAnaji/15/edit

добавить данные в таблицу и показать его. После этого я добавляю новый столбец - контроль.

data = google.visualization.arrayToDataTable([ 
     ['Name', 'Gender', 'Age', 'Donuts eaten'], 
     ['Michael' , 'Male', 12, 5], 
     ['Elisa', 'Female', 20, 7], 
     ['Robert', 'Male', 7, 3], 
     ['John', 'Male', 54, 2], 
     ['Jessica', 'Female', 22, 6], 
     ['Aaron', 'Male', 3, 1], 
     ['Margareth', 'Female', 42, 8], 
     ['Miranda', 'Female', 33, 6] 
    ]); 

    data.insertRows(0, [['Drew', 'Male', 32, 1]]); 

      data.addColumn('string', 'Kontrole'); 
     for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 
    if (data.getValue(y, 4) != 'a') { 
     data.setValue(y, 4, '<button id="edit" class="btn btn-info">edit row</button>'); 
    } 
} 

В новых пустых строк добавить кнопку HTML: <button id="edit" class="btn btn-info">edit row</button>

Теперь я хочу, чтобы при нажатии на кнопку ID редактировать называть этот код:

new google.visualization.events.addListener(table, 'ready', function() { 
     google.visualization.events.addListener(table.getChart(), 'select', function() { 
      var selection = table.getChart().getSelection(); 
      // iterate over all selected rows 
      for (var i = 0; i < selection.length; i++) { 
       $("#edit").removeClass("btn btn-success disabled") 
       $('#edit').addClass('btn btn-success'); 
       $("#name").val(table.getDataTable().getValue(selection[i].row,0)); 
       $("#gender").val(table.getDataTable().getValue(selection[i].row,1)); 
       $("#age").val(table.getDataTable().getValue(selection[i].row,2)); 
       $("#donuts_eaten").val(table.getDataTable().getValue(selection[i].row,3)); 

      } 
     }); 
    }); 

Когда я кнопку отделено (за пределами таблицы) этот код отлично работает, но когда я помещаю кнопку ID = редактировать в таблицу, тогда работать не будет?

Что может быть проблема здесь?

Answer 1

Создание обработчика события select для таблицы отменяет событие, пузырящее на столе, поэтому клик никогда не регистрируется на ваших кнопках редактирования (ваш код действительно срабатывает при редактировании, когда пользователь щелкает в любом месте подряд). Если вы хотите использовать обработчик событий щелчка для ваших кнопок, это способ сделать это. Во-первых, вам нужно исправить, как вы создаете кнопки (так как вы не можете иметь несколько элементов с одинаковыми ID, и вы должны быть в состоянии определить, какая строка кнопка принадлежит:

data.addColumn('string', 'Kontrole'); 
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 
    if (data.getValue(y, 4) == null) { 
     data.setValue(y, 4, '<button class="edit btn btn-info" data-row="' + y + '">edit row</button>'); 
    } 
} 

Тогда вместо используя select обработчика событий таблицы, используйте обработчик с click событий для кнопок:

$(document).on('click', '.edit', function() { 
    var row = parseInt($(this).data('row')); 
    $(this).removeClass("btn btn-success disabled") 
    $(this).addClass('btn btn-success'); 
    $("#name").val(table.getDataTable().getValue(row,0)); 
    $("#gender").val(table.getDataTable().getValue(row,1)); 
    $("#age").val(table.getDataTable().getValue(row,2)); 
    $("#donuts_eaten").val(table.getDataTable().getValue(row,3)); 
});