¡Gracias por abrir esta pregunta y ayudarme!

Estoy usando JQuery DataTable y quiero actualizar InnerHTML en cada celda. La razón es que eso:

Los datos originales en cada celda de DataTable son texto sin formato y difíciles de leer. Por ejemplo:

[ { "wikidataid": "Q142" }, { "wikidataid": "Q55" }, { "wikidataid": "Q39" }, { "wikidataid": "Q34" }, { "wikidataid": "Q36" }, { "wikidataid": "Q20" } ]

Por lo tanto, quiero crear una lista desordenada para que los datos puedan mostrarse formateados en lugar de un texto sin formato y anular el HTML interno de las celdas de la tabla de datos.

Este es el código que escribí:

 var table = $('#queryTable').DataTable(); var data = table.rows().data(); console.log(data.length); //Loop each row data.each(function (value, index) { //Loop each column for(var i=0; i<value.length; i++){ // only column 2 and 3 are the data we want to format if (i != 2 && i != 3){ continue; } var content = JSON.parse(value[i]) var ul=document.createElement('ul'); for (var k = 0; k < content.length; ++k) { var li=document.createElement('li'); li.setAttribute("class", "list"); li.innerHTML = "WikiDataId: " + content[k].wikidataid; // Use innerHTML to set the text if (content[k].attributes != null) { for (var j = 0; j < content[k].attributes.length; ++j){ var ulsub=document.createElement('ul'); ulsub.value = content[k].attributes[j].changedtype; var liName=document.createElement('li'); liName.innerHTML = content[k].attributes[j].name + ": " + content[k].attributes[j].value; ulsub.appendChild(liName); li.appendChild(ulsub); } } ul.appendChild(li); } // console.log(index); // console.log(i); // console.log(ul); //table.cell(index, i).data(ul.html()).draw(); table.cell(index, i).node().innerHTML = null; table.cell(index, i).node().appendChild(ul); console.log(table.cell(index, i).node()); }; }); });

Sin embargo, después de ejecutar el código anterior, aunque los datos están formateados en una lista desordenada. Pero los datos en las celdas de cada fila no se actualizan correctamente. Por ejemplo, los datos de la primera fila contienen los datos de la tercera fila, los datos de la segunda fila contienen los datos de la quinta fila, los datos de la tercera fila contienen los datos de la sexta fila, etc.

No estoy seguro si la forma en que actualizo el html interno es correcta. ¿Alguien podría ayudar aquí? ¡Muchas gracias!