选择html表格的元素并使用jquery更改内容

Question

专业人士您好
我的 asp.net 页面中有一个表格

<div role="tabpanel" class="tab-pane fade in active" id="a" aria-labelledby="all-tab">
  <div class="agile-news-table">
    <div class="w3ls-news-result">
      <h4>Search Results : <span>25</span></h4>
    </div>
    <table id="table-breakpoint">
      <thead>
        <tr>
          <th>No.</th>
          <th>Album Name</th>
          <th>Year</th>
          <th>Artist</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td class="w3-list-img">
            <a href="single.html"><img src="images/m1.jpg" alt="" /> <span>Al Muallim</span></a>
          </td>
          <td>2003</td>
          <td class="w3-list-info"><a href="comedy.html">Sami Yusuf</a></td>
        </tr>
        <tr>
          <td>2</td>
          <td class="w3-list-img">
            <a href="single.html"><img src="images/m2.jpg" alt="" /> <span>Barakah</span></a>
          </td>
          <td>2017</td>
          <td class="w3-list-info"><a href="genre.html">Sami Yusuf</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

您看到的表格是一个 html 模板，它有 25 行，正如您在 <h4> 中的 <span> 中看到的那样。

我通过 ajax 获取专辑的数据，我希望通过 jQuery 分配表中的值。
我在 25 行上使用了一个循环，对于每一行，我必须在第二个 <td> 中到达 <img> 以更改其 src ，与它旁边的 <spane> 相同以更改其中的文本专辑名称。
在第三个<td> 里也改一下年份吧。
在第四个<td> 我需要更改<a> 的href 和<a> 的文本，这是艺术家的名字。
你看到id="a"在第一个<div>中了吗，这是因为我喜欢这个表中的每个字母表，其中字母是那个表的id，
并且有一个A- ZList of the letters where a click a letter will make request to bring the albums with names with the first at the clicked letter, and assing them from the XmlHttpRequest.responseText to the table.
这就是为什么我在这个 jQuery 代码中使用 letter 变量来传递第一个 <div> 的 id 以将值分配到表中，因为还有另一个 <div id="b"> 等等

function AssignAlbumIntoDOM(albumName, albumYear, albumPhotoPath, artistName, albumsCount, i, letter) {
  if (i < 25 && 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);
  }
}

通过此代码，我可以在第三个 <td> 和第四个 <td> 中分配 albumYear 和 artistName，
但在第二个 <td> 中无法更改 albumPhotoPath <img> @ 987654349@ 和 albumName 中的 <span>

我可以扩展问题
从解释中可以看出，这个页面是一个搜索页面
而且我有专辑的所有信息，除了专辑的歌曲，那么如何在点击第二个@987654354 中的<img> 后将这些信息传递到一个名为Single.aspx 的页面，以显示专辑信息及其歌曲@，而在Single.aspx 我只需要通过ajax 来请求专辑的歌曲而不是所有的信息。
我认为传递将在第二个<td> 中的<a> 的href 中作为QueryString，还有其他方法吗？

非常感谢你

Answer 1

最好的办法是为 dom 中的行对象分配 id 或索引，并以这种方式引用它们。像这样的：

<div role="tabpanel" class="tab-pane fade in active" id="a" aria-labelledby="all-tab">
  <div class="agile-news-table">
    <div class="w3ls-news-result">
      <h4>Search Results : <span>25</span></h4>
    </div>
    <table id="table-breakpoint">
      <thead>
        <tr>
          <th>No.</th>
          <th>Movie Name</th>
          <th>Year</th>
          <th>Artist</th>
        </tr>
      </thead>
      <tbody>
        <tr id="1">
          <td>1</td>
          <td class="w3-list-img">
            <a href="single.html"><img src="images/m1.jpg" alt="" /> <span>Al Muallim</span></a>
          </td>
          <td>2003</td>
          <td class="w3-list-info"><a href="comedy.html">Sami Yusuf</a></td>
        </tr>
        <tr id="2">
          <td>2</td>
          <td class="w3-list-img">
            <a href="single.html"><img src="images/m2.jpg" alt="" /> <span>Barakah</span></a>
          </td>
          <td>2017</td>
          <td class="w3-list-info"><a href="genre.html">Sami Yusuf</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

然后，在加载内容时，使用nth-child 选择器来定位您要填充的特定表格单元格：

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);
  }
}

我更改了 nth-child 的索引，因为 <img> 是第二个孩子，因为 nth-child 从 1 而不是 0 开始索引
并且.text(albumsCount) 不在表格行的旁边以使用i

Answer 2

我注意到 Firefox 中的开发人员工具，html 模板中的 javascript 库将表中第二个 <td> 的内容包装在 <span> 中，这就是为什么我的第一个 jQuery 代码不起作用但之后我修改了它，它的工作原理是这样的

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);
}

在 cmets 中，我尝试修改了 Matt Spinks 的答案，但我将 :nth-child(1-based index) 替换为 :eq(0-based index)

Answer 3

这个问题看起来到处都是，所以我认为你要问的是：

如何在 HTML 表格中显示数据？

Demo中评论的细节

演示

// 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 = `
  <tr>
  <td>${idx+1}</td>
  <td><a href="${url0}">
  <img src="${img}">
  ${album}</a>
  </td> 
  <td>${year}</td>
  <td><a href="${url1}">
  ${artist}</a>
  </td>
  </tr>`;
  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%;
}

<section id="N" class='a-z'>
  <div>
    <header>
      <h4>Search Results:
        <output class='hits'></output>
      </h4>
      <button class='btn'>Add Row</button>
    </header>
    <table class="table">
      <thead>
        <tr>
          <th>No.</th>
          <th>Album</th>
          <th>Year</th>
          <th>Artist</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>