Datatable activate single cell editing onclick

Question

I was unable to utilize the jQuery datatable plugin here:

https://editor.datatables.net/examples/inline-editing/simple

I kept getting an error, so I just dropped it and decided to do it myself.

Starting with the datatable:

$.ajax({
  url: 'api/searchVoyageInfo.php',
  type: 'POST',
  data: '',
  dataType: 'html',
  success: function(data, textStatus, jqXHR){
    var jsonObject = JSON.parse(data); 
    var table = $('#example1').DataTable({
      "data": jsonObject,
      "columns": [{ 
        { "data": "COLUMN1" },  
        { 
          "data": "COLUMN2",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
            $(nTd).html("<a href='#' class='checkBound'>"+oData.COLUMN2+"</a>
                         <input type='text' class='editbound' 
                         id='editbound' data-uid='"+oData.VOYID+"' 
                         data-editbound='"+oData.COLUMN2+"' value='"+oData.BOUND+" 
                         display: none;' />");
          }
        },
        { "data": "COLUMN3" },
        // few more columns
      }],
      "iDisplayLength": 50,
      "paging": true,
      "bDestroy": true,
      "autoWidth": true,
      "dom": 'Bfrtip',
       "buttons": [
        // some extend buttons
      ]
    });
  },
  error: function(// some stuff){
    // do some other stuff
    // this part is not important
  }
});

Within COLUMN2, you should see a class 'checkBound' which is visible when the page loads. There is also an input class 'editbound' which is not visible.

Here is the function that is supposed to hide class 'checkBound' and then display class 'editbound':

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  $('.checkBound').hide();
  $('.editbound').show();
});

Using the above, when the page is finished loading, the datatable is displayed with no problem.

Upon clicking one of the cells with class 'checkBound' to display the input class 'editbound', the input does display itself, but it also displays every other cell in the column.

Before click:

After click:

As you can see, the first cell in the BOUND column is the cell that was clicked. But when clicked, the rest of the cells were activated. I want to prevent this from happening.

How can I make this work?

Answer 1

This is how I (somewhat) solved my problem. In the datatable section, I added an ID field called VOYID and included that ID with the class in the href and the input:

"data": "COLUMN2",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
   $(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound'>"+oData.COLUMN2+"</a>
                <input type='text' class='editbound"+oData.VOYID+"' 
                id='editbound' data-uid='"+oData.VOYID+"' 
                data-editbound='"+oData.COLUMN2+"' value='"+oData.BOUND+" 
                display: none;' />");
}

Then down in the button click section, I utilized the rowData to check for the exact class. This way, when you click the link, only the unique class will open and not all of the cells in the column:

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  var voyid = rowData.VOYID;

  $('.checkBound'+voyid).hide();
  $('.editbound'+voyid).show();
});

Now, when I click on the link, it is only that cell that gets the input activated: