Seleccionar elementos de la tabla html y cambiar los contenidos usando jquery

Hola profesionales
Tengo una mesa en mi página asp.net

la tabla que ve es una plantilla html, tiene 25 filas como puede ver en en

.

Obtengo los datos de los álbumes por ajax y quiero que jQuery asigne los valores que hay en los lugares en la tabla.
Estoy usando un bucle en las 25 filas, y para cada fila debo llegar al en el segundo

para cambiar su src , lo mismo para el al lado para cambiar el texto dentro de él, que es el álbum nombre.
En el tercero

también para cambiar el año en él.
En la cuarta

necesito cambiar el href de y el texto de que es el nombre del artista.
¿Ves esa id="a" en el primer

, esto es porque tengo como esta tabla para cada letra en el alfabeto, donde la letra es la id para esa tabla,
y hay una A-ZList de las letras donde un clic en una letra solicitará que los álbumes con nombres comiencen con la letra que se está haciendo clic, y los asentará desde XmlHttpRequest.responseText a la tabla.
Es por eso que uso la variable de letter en este código jQuery para pasar el id del primer

para asignar los valores a la tabla, porque hay otro

y así sucesivamente

 function AssignAlbumIntoDOM(albumName, albumYear, albumPhotoPath, artistName, albumsCount, i, letter) { if (i = 0) { // keep calling until i is 25 jQuery("#" + letter + " h4 span").text(albumsCount); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(1).children().eq(0).children().eq(0).attr("src", albumPhotoPath); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(2).text(albumYear); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(3).children().eq(0).text(artistName); } } 

con este código, puedo anotar el albumYear en el tercer

y artistName en el cuarto

,
pero no pudo cambiar en el segundo

el albumPhotoPath en src y el albumName del albumName en el

¿Puedo extender la pregunta?
Esta página, como puede ver en la explicación, es una página de búsqueda
Y tengo toda la información del álbum excepto las canciones del álbum, así que ¿cómo puedo pasar esta información a una página llamada Single.aspx dedcated para mostrar la información de un álbum y sus canciones después de hacer clic en en el segundo

, y en Single.aspx solo necesito que ajax solicite las canciones del álbum, no toda la información nuevamente.
Creo que la aprobación será como QueryString en el href de
en el segundo

, ¿hay alguna otra manera?

Te agradezco mucho

Su mejor opción es asignar identificaciones o índices a los objetos de fila en el dom y hacer referencia a ellos de esa manera. Algo como esto:

 

Search Results : 25

No. Movie Name Year Artist
1 Al Muallim 2003 Sami Yusuf
2 Barakah 2017 Sami Yusuf

Luego, al cargar el contenido, use el selector nth-child para apuntar a la celda de la tabla específica que desea llenar:

 function AssignAlbumIntoDOM(albumName, albumYear, albumPhotoPath, artistName, albumsCount, i, letter) { if (i < 25 && i >= 0) { // this raises some red flags. check your calling function. jQuery("#" + letter + " h4 span").text(albumsCount); jQuery("#" + i + " td:nth-child(2) img").attr('src',albumPhotoPath); jQuery("#" + i + " td:nth-child(3)").html(albumYear); jQuery("#" + i + " td:nth-child(4)").html(artistName); } } 

Cambié el índice de nth-child porque es el segundo hijo porque nth-child comienza a indexar desde 1 no 0
y .text(albumsCount) no está al lado de las filas de la tabla para usar i

Noté por las herramientas de desarrollador en Firefox que las bibliotecas javascript en la plantilla html están envolviendo el contenido del segundo

en la tabla en un por eso mi primer código jQuery no funcionó, pero después lo modifiqué funcionó así

 if (i < 25 && i >= 0) { // keep calling until i is 25 means i:[0-24] jQuery("#" + letter + " h4 span").text(albumsCount); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(1).children().eq(0).children().eq(0).children().eq(0).attr("src", albumPhotoPath); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(1).children().eq(0).children().eq(0).children().eq(1).text(albumName); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(2).text(albumYear); jQuery("#" + letter + " table tbody").children().eq(i).children().eq(3).children().eq(0).text(artistName); //jQuery("#" + letter + " h4 span").text(albumsCount); //jQuery("#" + letter + "r" + (i + 1) + " td:eq(1) img").attr('src', albumPhotoPath); //jQuery("#" + letter + "r" + (i + 1) + " td:eq(1) a span").text(albumName); //jQuery("#" + letter + "r" + (i + 1) + " td:eq(2)").text(albumYear); //jQuery("#" + letter + "r" + (i + 1) + " td:eq(3) a").text(artistName); } 

La pregunta parece que está por todos lados, así que esto es lo que creo que estás preguntando:

¿Cómo se muestran los datos en una tabla HTML?

Detalles comentados en Demo

Manifestación

 // Reference to section "N" var char = document.querySelector('section').id; console.log(char); // Counter var index = 0; // Object of arrays var data = { url0: ['https://en.wikipedia.org/wiki/Nevermind', 'https://en.wikipedia.org/wiki/Tragic_Kingdom'], img: ['https://upload.wikimedia.org/wikipedia/en/b/b7/NirvanaNevermindalbumcover.jpg', 'https://upload.wikimedia.org/wikipedia/en/9/9d/No_Doubt_-_Tragic_Kingdom.png'], album: ['NeverMind', 'Tragic Kingdom'], year: ['1991', '1995'], url1: ['https://en.wikipedia.org/wiki/Nirvana_(band)', 'https://en.wikipedia.org/wiki/No_Doubt'], artist: ['Nirvana', 'No Doubt'] }; // Pass data function DisplayAlbum(data) { // Reference the counter this.idx = index; // Object data property values by index this.url0 = data['url0'][index]; this.img = data['img'][index]; this.album = data['album'][index]; this.year = data['year'][index]; this.url1 = data['url1'][index]; this.artist = data['artist'][index]; /* Row is a Template Literal with all of || object data's values interpolated */ this.row = `  ${idx+1}   ${album}  ${year}  ${artist}  `; index++; return this.row; } /* On button click append the return of || DisplayAlbum() */ $('#' + char + ' .btn').on('click', function() { $('#' + char + ' .table').append(DisplayAlbum(data)); }); 
 html { font: 100 10px/1 Consolas; } img { width: 64px; height: 64px; display: block; margin: 0 auto; } button { font: inherit } td { text-align: center } .as-console-wrapper { width: 30%; margin-left: 70%; } 
 

Search Results:

No. Album Year Artist