Cómo actualizar la tabla de datos jerárquicos dinámicamente usando jQuery

Si desea modificar dinámicamente la celda de una tabla cargada dinámicamente, podemos hacerlo mediante la llamada jQuery $ .ajax () de la siguiente manera:

  1. Controller Logic, API web C #:

utilizando el sistema;
usando System.Collections.Generic;
usando System.Linq;
usando System.Net;
usando System.Net.Http;
usando System.Web.Http;

espacio de nombres ReplacingTablesWithDivs.Controllers
{
[RoutePrefix (“api / Valores”)]
public class ValuesController: ApiController
{

[HttpGet]
[Ruta (“GetGroceryData”)]
Lista pública <Tupla > GetGroceryData ()
{
return new List <Tupla >
{
Tuple.Create (“Huevos”, 12, 60),
Tuple.Create (“Leche”, 1, 40),
Tuple.Create (“Manzanas”, 12, 75)
};
}
}
}

2. La vista (HTML5 y jQuery):

$ (function () {

$ (‘# btn1’). click (function () {
$ .ajax ({
url: “http: // localhost: 11625 / api / Values ​​/ GetGroceryData”,
dataType: “json”,
método: “OBTENER”,
éxito: función (datos) {
var someTable = ‘

Artículo Número de artículos Precio de los artículos ‘;

$ .each (datos, función (idx, obj) {
// Exterior cada ciclo es para atravesar filas de datos JSON
someTable + = ‘

‘;

// Cada ciclo interno es para atravesar columnas de datos JSON
$ .each (obj, función (clave, valor) {
someTable + = ‘

‘ + value + ‘

‘;
});

someTable + = ‘

‘;
someTable + = ‘


});

someTable + = ‘

‘;
$ (‘# someTable’). html (someTable);

$ (“. btnUpdate”). clic (function () {
var price = $ (this) .closest (‘tr’). find (‘td: eq (2)’). text (). trim ();
precio * = 2;
console.log (precio);
var cell = $ (this) .closest (‘tr’). find (‘td: eq (2)’);

$ .ajax ({
url: “http: // localhost: 11625 / api / Values ​​/ GetGroceryData”,
dataType: “json”,
método: “OBTENER”,
éxito: función (datos) {
$ (celular) .html (precio);
},
error: function (jqXHR, textStatus, errorThrown) {

}
});

});
},
error: function (jqXHR, textStatus, errorThrown) {

}
});
});
});

Cambiar dinámicamente el valor de la celda de la tabla usando AJAX

Tabla de lista de compras