选择html表格的元素并使用jquery更改内容 [英] Select elements of html table and change contents using jquery
问题描述
您好专家
我在asp.net有一个表格页面
< div role =tabpanelclass = tab-pane fade in activeid =aaria-labelledby =all-tab> < div class =agile-news-table> < div class =w3ls-news-result> < h4>搜索结果：< span> 25< / span>< / h4> < / DIV> < table id =table-breakpoint> < THEAD> < TR> <的第i;第< /第> < th>专辑名称< / th> <的第i;年份< /第> <的第i;艺术家< /第> < / TR> < / THEAD> < TBODY> < TR> < TD→1< / TD> < td class =w3-list-img> < a href =single.html>< img src =images / m1.jpgalt =/> < 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.jpgalt =/> <跨度> Barakah< /跨度>< / A> < / TD> < TD> 2017< / TD> < td class =w3-list-info>< a href =genre.html> Sami Yusuf< / a>< / td> < / TR> < / tbody的> < /表> < / div>< / div>
$ b
您看到的表格是一个html模板，它具有25行，您可以在< span> 中看到< h4> 。
我通过ajax获取相册的数据，并且我希望通过jQuery为表中的数据分配值。
我在25行使用循环，对于每一行，我必须在第二行<$ c $中到达< img> c>< td> 更改 src ，同样适用于< spane> 在它旁边更改其中的文本，即专辑名称。
在第三个< td> 中也更改其中的年份
在第四个< td> 中，我需要将 href code>< a> 以及< a> 的文字，这是艺术家的名字。
您是否在第一个< div> 中看到 id =a ，这是因为我对字母表中的每个字母都有这样的表格，字母是该表格的 id ，
并且有一个A-ZList单击字母的请求将带有名称的相册以单击的字母开头并将它们从 XmlHttpRequest.responseText 指定到表中。
这就是为什么我在这个jQuery代码中使用 letter 变量来传递 id 因为还有另一个< div id =b>< / $ c，所以第一个< div> $ c>依此类推
function AssignAlbumIntoDOM（albumName， （如果（i <25& i> = 0）{//继续调用直到我是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 在第四< td> < tc> code>，
但不能在第二个< td> albumPhotoPath 中更改< img> src 和 albumName code>< span>
我可以延长这个问题吗？
这个页面从解释中看到一个搜索页面
除了专辑的歌曲外，我拥有专辑的所有信息，所以我怎样才能将这些信息传递到名为 Single.aspx < td> 中的< img> 后，c c> c被限定为显示专辑信息及其歌曲。 $ c>，并且在 Single.aspx 中我只需要ajax就可以再次请求专辑的歌曲而不是所有信息。
我认为传递将是 href 中的 QueryString <$ c第二个< td> 中的$ c>< a> ，还有另外一种方法吗？
我非常感谢你
解决方案我注意到Firefox中的开发人员工具，html模板中的JavaScript库在表格中包含了第二个< td> 的内容。一个< span> 这就是为什么我的第一个jQuery代码不起作用，但是在我完成它之后，它就像这样工作
< pre class =snippet-code-js lang-js prettyprint-override> if（i< 25&& i> = 0）{//继续通话直到我25岁意味着我：[0-24] jQuery（＃+字母+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）。 。孩子（）方程（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（＃+字母+h4 span）。text（albumsCount）; // jQuery（＃+字母+r+（i + 1）+td：eq（1）img）。attr（'src'，albumPhotoPath）; // jQuery（＃+ letter +r+（i + 1）+td：eq（1）span）.text（albumName）; // jQuery（＃+ letter +r+（i + 1）+td：eq（2））。text（albumYear）; // jQuery（＃+字母+r+（i + 1）+td：eq（3）a）。text（artistName）;} ：nth-child（1）
与：eq（从0开始的索引）
Hello Professionals
I have a table in my asp.net page
<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>
the table you see is an html template, it has 25 rows as you see in the <span> in the <h4> .
I get data of Albums by ajax and I want by jQuery to assign the values in there palces in the table.
I am using a loop on the 25 rows, and for every row I must reach the <img> in the second <td> to change its src , same for the <spane> beside it to change the text inside it which is the album name.
In the third <td> also to change the year in it .
In the forth <td> I need to change the href of <a> and the text of <a> which is the name of the artist.
Do you see that id="a" in the first <div>, this is because I have like this table for every letter in the alphabet, where the letter is the id for that table,
and there is an A-ZList of the letters where a click on a letter wil make request to bring the albums with names start with the clicked letter, and assing them from the XmlHttpRequest.responseText to the table.
Thats why I use letter variable in this jQuery code to pass the id of the first <div> to assign the values into the table , because there is another <div id="b"> and so on
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);
}
}
by the this code I can assing the albumYear in the third <td> and artistName in thr fourth <td>,
but could not change in the second <td> the albumPhotoPath in <img> src and the albumName in the <span>
Can I extend the question
This page as you see from the explanation, is a search page
And I have all the information of the album except the songs of the album, so how can I pass these information to a page called Single.aspx dedcated to show an album information and its songs after clicking the <img> in the second <td>, and in the Single.aspx I only need by ajax to request the songs of the album not all the information again.
I think the passing will be as a QueryString in the href of <a> in the second <td>, is there another way?
I thank you so much so much
解决方案 I noticed by the developer tools in Firefox that the javascript libraries in the html template are wrapping the the content of the second <td> in the table in a <span> that is why my first jQuery code did not work but after I modyfied it, it worked like this
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);
}
here in the comments I tried Matt Spinks's answer with modification but I replaced :nth-child(1-based index) with :eq(0-based index)
这篇关于选择html表格的元素并使用jquery更改内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
