<table width="100%" border="1">
<thead>
<tr>
<th>Image</th>
<th>Title</th>
<th>Link</th>
</tr>
<tbody></tbody>
</thead>
</table>
$(function() {
$.ajax({
type: 'post',
url: 'https://coolql.cool/graphql',
contentType: "application/json",
data: JSON.stringify({
query: `{
phapLuat: site(url: "https://vnexpress.net/phap-luat") {
news: selectAll(elem: ".sidebar_1 .list_news") {
title: select(elem: "h4.title_news a") {
text: attr(name: "title"),
href
}
thumb: select(elem: ".thumb_art .vne_lazy_image") {
src: data(name: "original")
}
}
}
giaoDuc: site(url: "https://vnexpress.net/giao-duc") {
news: selectAll(elem: ".sidebar_1 .list_news") {
title: select(elem: "h4.title_news a") {
text: attr(name: "title"),
href
}
thumb: select(elem: ".thumb_art .vne_lazy_image") {
src: data(name: "original")
}
}
}
}`
}),
success: function(res) {
$.each(res.data.phapLuat.news, function(idx, n) {
$("table tbody").append(`
<tr>
<td><img src="${n.thumb.src}" /></td>
<td>${n.title.text}</td>
<td>${n.title.href}</td>
</tr>
`)
})
$.each(res.data.giaoDuc.news, function(idx, n) {
$("table tbody").append(`
<tr>
<td><img src="${n.thumb.src}" /></td>
<td>${n.title.text}</td>
<td>${n.title.href}</td>
</tr>
`)
})
}
})
})
This Pen doesn't use any external CSS resources.