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模板，它在<span>的{{1}}中有25行。

我通过ajax获取了Albums的数据，我希望jQuery能够在表中的那些位置分配值。
我在25行上使用循环，对于每一行，我必须到达第二个<h4>中的<img>以更改其<td>，对于旁边的src也是如此更改其中的文本，即专辑名称在第三个<spane>也改变它的年份。
在第四个<td>中，我需要更改<td>的{{1}}和href的文字，这是艺术家的名字。
你是否在第一个<a>中看到<a>，这是因为我对字母表中的每个字母都喜欢这个表格，其中字母是该表格的id="a"，并且有一个字母的A-ZList，其中点击一个字母将要求将带有名字的专辑从点击的字母开始，并将它们从<div>分配给表格。
这就是为什么我在这个jQuery代码中使用id变量来传递第一个XmlHttpRequest.responseText的{{1}}来将值分配到表中，因为还有另一个letter等等

id

根据此代码，我可以在第三个<div>中<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);
  }
}

中的albumYear，但在第二个{{1}中无法更改} <td> artistName中的<td>和<td>中的albumPhotoPath

我可以延长这个问题吗？从解释中看到的这个页面是搜索页面
除了专辑中的歌曲之外，我还拥有该专辑的所有信息，因此如何将这些信息传递到名为<img>的页面，以便在点击src后显示相册信息及其歌曲第二个albumName，在<span>我只需要ajax来请求专辑的歌曲不再是所有信息。
我认为第二个Single.aspx中<img> <td>的传递将是Single.aspx，还有另一种方法吗？

我非常感谢你

Answer 1

您最好的选择是将ID或索引分配给dom中的行对象并以此方式引用它们。像这样：

<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代码所做的没有工作，但在我改变之后，它就像这样工作

＆＃13;

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

＆＃13;

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

Answer 3

这个问题看起来像遍布整个地方，所以我想你会问：

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

在演示中评论的详细信息

演示

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

选择html表的元素并使用jquery

3 个答案:

演示