如何进行内联DataTable编辑

Question

我的应用中包含以下代码：

var editor;
$(document).ready(function() {
 

    var t = $('#nuevoart').DataTable({
           columns: [
        {title: "COD.:" },
        {title: "NOMBRE" },
        {title: "MARCA" },
        {"title": "P/U" },
        {title: "CAT.:" },
        {title: "SUBCAT.:" }
    ], 
        language:{
                        "sProcessing":     "Procesando...",
                        "sLengthMenu":     "Mostrar _MENU_ registros",
                        "sZeroRecords":    "No se encontraron resultados",
                        "sEmptyTable":     "Ningún dato disponible en esta tabla",
                        "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix":    "",
                        "sSearch":         "Buscar:",
                        "sUrl":            "",
                        "sInfoThousands":  ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst":    "Primero",
                            "sLast":     "Último",
                            "sNext":     "Siguiente",
                            "sPrevious": "Anterior"
                        },
                        "oAria": {
                            "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                        }
                        },
 
    
          responsive: true });

            
$('#addRow').on( 'click', function () {
        t.row.add( [
            'ALFANUMERICO ',
            ' PRODUCTO',
            ' MARCA',
            'PRECIO ',
            'CATEGORIA ',
            ' SUBCATEGORIA'
        ] ).draw( false );
 
     
    } );
$('#nuevoart').on( 'click', 'tbody td', function () {

} );

});

然后我用Jquery插件创建了一个DataTable，我实现了使用上述值插入新行。但我希望能够通过单击某些字段来编辑行，以便插入具有内容的新记录。有可能吗？

Answer 1

好吧，我使用了Mayank上面的代码，现在可以正常使用了，但是我做了一些更改：

 var oldValue = null;
			$(document).on('dblclick', '.editable', function(){
				oldValue = $(this).html();
				$(this).removeClass('editable');	// to stop from making repeated request
				
				$(this).html('<input type="text" style="width:150px;" class="update" value="'+ oldValue +'" />');
				$(this).find('.update').focus();
			});
			var newValue = null;
			$(document).on('blur', '.update', function(){
				var elem    = $(this);
				newValue 	= $(this).val();
				var empId	= $(this).parent().attr('id');
				var colName	= $(this).parent().attr('name');
			
			
					$(elem).parent().addClass('editable');
					$(this).parent().html(newValue);
			
			});
	

添加新行的代码如下：

$('#addRow').on( 'click', function () {
    t.row.add(
     $('<tr><td class="editable">ALFANUMERICO</td><td class="editable">NOMBRE</td><td class="editable">MARCA'+
     '</td><td class="editable">PRECIO</td><td class="editable">CATEGORIA</td><td class="editable">SUBCATEGORIA</td></tr>')[0] ).draw( false );


} );

每列都是可编辑的类。