VII. jQuery II. rész
Táblázatok
A táblázatok képzik az adatok reprezentációjának alapját. Táblázatokban foglaljuk össze a fontos adatokat. Hogyan hozhatunk létre táblázatot HTML kódban:
<html>
<head>
<title>jquery</title>
</head>
<body>
<table>
<tr>
<td>1. sor, 1. oszlop</td>
<td>1. sor, 2. oszlop</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 2. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
<tr>
<td>3. sor, 1. oszlop</td>
<td>3. sor, 2. oszlop</td>
<td>3. sor, 3. oszlop</td>
</tr>
<tr>
<td>4. sor, 1. oszlop</td>
<td>4. sor, 2. oszlop</td>
<td>4. sor, 3. oszlop</td>
</tr>
</table>
</body>
</html>
Adjunk némi stílust a táblázathoz:
<html>
<head>
<title>jquery</title>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td>1. sor, 1. oszlop</td>
<td>1. sor, 2. oszlop</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 2. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
<tr>
<td>3. sor, 1. oszlop</td>
<td>3. sor, 2. oszlop</td>
<td>3. sor, 3. oszlop</td>
</tr>
<tr>
<td>4. sor, 1. oszlop</td>
<td>4. sor, 2. oszlop</td>
<td>4. sor, 3. oszlop</td>
</tr>
</table>
</body>
</html>
Lehetőségünk van külön fejléc létrehozására is:
<html>
<head>
<title>jquery</title>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
th{
border: 1px solid black;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Fejléc1</th>
<th>Fejléc2</th>
<th>Fejléc3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. sor, 1. oszlop</td>
<td>1. sor, 2. oszlop</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 2. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
<tr>
<td>3. sor, 1. oszlop</td>
<td>3. sor, 2. oszlop</td>
<td>3. sor, 3. oszlop</td>
</tr>
<tr>
<td>4. sor, 1. oszlop</td>
<td>4. sor, 2. oszlop</td>
<td>4. sor, 3. oszlop</td>
</tr>
<tbody>
</table>
</body>
</html>
Most, hogy van egy táblánk, fussunk végig az egyes sorain és a páros számú sorok hátterét állítsuk be kékre.
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
var index =1;
$('#mytable tbody tr').each(function(){
if(index % 2 == 0)
{
$(this).attr("bgcolor", "#819FF7");
}
index++;
});
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
th{
border: 1px solid black;
text-align: left;
background: #2EFEF7;
}
</style>
</head>
<body>
<button id="gomb">Mutasd</button>
<table id="mytable">
<thead>
<tr>
<th>Fejléc1</th>
<th>Fejléc2</th>
<th>Fejléc3</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.96</td>
<td>1.35</td>
<td>0.5</td>
</tr>
<tr>
<td>2.26</td>
<td>0.22</td>
<td>0.001</td>
</tr>
<tr>
<td>150.0</td>
<td>52.7</td>
<td>0.7</td>
</tr>
<tr>
<td>5.2</td>
<td>0.92</td>
<td>52.2</td>
</tr>
<tbody>
</table>
</body>
</html>
Most fussunk végig az egyes sorain és oszlopain és az egyes elemek értéke alapján állítsuk be a cellák hátterét.
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
$('#mytable tr').each(function(){
$(this).find('td').each(function(){
if($(this).text() < 1.0) {
$(this).css("background", "#FE2E2E");
} else {
$(this).css("background", "#819FF7");
}
});
});
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
th{
border: 1px solid black;
text-align: left;
background: #2EFEF7;
}
</style>
</head>
<body>
<button id="gomb">Mutasd</button>
<table id="mytable">
<thead>
<tr>
<th>Fejléc1</th>
<th>Fejléc2</th>
<th>Fejléc3</th>
</tr>
</thead>
<tbody>
<tr>
<td>0.96</td>
<td>1.35</td>
<td>0.5</td>
</tr>
<tr>
<td>2.26</td>
<td>0.22</td>
<td>0.001</td>
</tr>
<tr>
<td>150.0</td>
<td>52.7</td>
<td>0.7</td>
</tr>
<tr>
<td>5.2</td>
<td>0.92</td>
<td>52.2</td>
</tr>
<tbody>
</table>
</body>
</html>
Most nézzük meg, hogy hogyan hozhatunk létre teljes táblázatot jQuery-vel:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
var tablazat = "<table>"+
"<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>"+
"<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>"+
"<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>"+
"</table>";
$( "#gomb" ).after(tablazat);
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
</style>
</head>
<body>
<button id="gomb">Mutasd</button>
</body>
</html>
Nemcsak teljes táblázatot hozhatunk létre, hanem csupán egy-egy sort:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#gomb" ).click(function() {
var index = $("table").find("tr").length + 1;
var ujsor = "<tr><td>"+index+".1</td><td>"+index+".2</td><td>"+index+".3</td></tr>";
$( "table" ).append(ujsor);
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
</style>
</head>
<body>
<button id="gomb">Új sor</button>
<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
</body>
</html>
Sorokat is törölhetünk a jQuery segítségével:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( "#last" ).click(function() {
$('table tr:last').remove();
});
$( "#first" ).click(function() {
$('table tr:first').remove();
});
$( "#third" ).click(function() {
$('table tr:eq(2)').remove();
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
</style>
</head>
<body>
<button id="last">utolsó sor törlése</button>
<button id="first">első sor törlése</button>
<button id="third">3. sor törlése</button>
<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
<tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
<tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
</table>
</body>
</html>
Adott, a felhasználó által kiválasztott sor törlése:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
$( ".delete" ).click(function() {
$(this).parent().parent().remove();
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:100%;
}
</style>
</head>
<body>
<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td><td><button class="delete">sor törlése</button></td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td><td><button class="delete">sor törlése</button></td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td><td><button class="delete">sor törlése</button></td></tr>
<tr><td>4.1</td><td>4.2</td><td>4.3</td><td><button class="delete">sor törlése</button></td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td><td><button class="delete">sor törlése</button></td></tr>
<tr><td>6.1</td><td>6.2</td><td>6.3</td><td><button class="delete">sor törlése</button></td></tr>
</table>
</body>
</html>
A táblázatok tartalma legtöbb esetben külső forrásból (pl. adatbázisból) jön. Ezt most külső js file-lal fogjuk demonstrálni. A külső js file (names-100.js) egy objektum tömböt tartalmazz az alábbi módon:
var nevek = [{"first":"Branda","street":"9474 Kempker Turnpike","last":"Mahmoud","city":"Holliday","state":"SC","zip":"55511"},
{"first":"Cathleen","street":"9749 Mcinerney Boulevard","last":"Stelle","city":"Lechner Common","state":"BI","zip":"23917"} ...
és most jelenítsük meg ezeket az adatokat:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="names-100.js"></script>
<script>
$( document ).ready(function() {
var tablazat="<table>";
tablazat +="<tr><th>Name</th><th>State</th><th>City</th><th>zip</th><th>Street</th></tr>";
$.each( nevek , function(j, valj) {
tablazat +="<tr>";
tablazat += "<td>"+valj.first+" "+valj.last+"</td><td>"+valj.state+"</td><td>"+valj.city
+"</td><td>"+valj.zip+"</td><td>"+valj.street+"</td>";
tablazat +="</tr>";
});
tablazat+="</table>";
$("body").append(tablazat);
});
</script>
<style>
td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
table {
border-collapse: collapse;
}
th{
border: 1px solid black;
text-align: center;
background: #2EFEF7;
}
</style>
</head>
<body>
</body>
</html>
Vegyük alapul az előző példát. Feladat: határozzuk meg, hogy milyen államok vannak felsorolva a táblázatban, majd ezekből egy legördülő menüt készítve, a felhasználó kiválaszthat egy államot, melyeknek hatására csak az adott állambéliek jelennek meg:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="names-100.js"></script>
<script>
$( document ).ready(function() {
var tablazat="<table>";
tablazat +="<tr><th>Name</th><th>State</th><th>City</th><th>zip</th><th>Street</th></tr>";
var states = [];
var vanmar = false;
$.each( nevek , function(j, valj) {
tablazat +="<tr>";
tablazat += "<td>"+valj.first+" "+valj.last+"</td><td>"+valj.state+"</td><td>"+valj.city+"</td><td>"+valj.zip+
"</td><td>"+valj.street+"</td>";
tablazat +="</tr>";
vanmar = false;
for(var i = 0; i < states.length; i++)
{
if(states[i] == valj.state)
{
vanmar = true;
break;
}
}
if(vanmar == false)
states.push(valj.state);
});
tablazat+="</table>";
$("body").append(tablazat);
var select = "State: <select id='allam'>";
select += "<option value='Allstate'>Mindegyik</option>";
for(var i = 0; i < states.length; i++)
select += "<option value='"+states[i]+"'>"+states[i]+"</option>";
select += "</select><br/><br/>";
$("table").before(select);
$("#allam").change(function() {
$("table tr").hide();
var allam = $(this).val();
if(allam == "Allstate") {
$("table tr").show();
} else {
$("table tr:first").show();
$('table tr').each(function() {
if($(this).find("td").eq(1).text() == allam)
$(this).show();
});
}
});
});
</script>
<style>
td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
table {
border-collapse: collapse;
}
th{
border: 1px solid black;
text-align: center;
background: #2EFEF7;
}
</style>
</head>
<body>
</body>
</html>
1. Példa: peptidek
Adott két külső js file (H5_288K és H5_299K), amiben két különböző hőmérsékleten megmért aminosav hidrogén távolságok találhatóak a következő formátumban:
var data288 = [{"AssignF1":"8TyrH","AssignF2":"8TyrHa","Dist":2.81065},
{"AssignF1":"11TrpHe1","AssignF2":"11TrpHd1","Dist":2.56822},
{"AssignF1":"3GluH","AssignF2":"3GluHa","Dist":2.24228}, ...
Feladat: táblázatosan foglaljuk össze a megmért hidrogén-hidrogén távolságokat, ahol az első oszlop tartalmazza a hidrogének jelölését, a második a 288K mért távolságot, a harmadik oszlop pedig a 299K mért adatot. Az adat hiányt (azaz ami nem lett megmérve) jelöljük "--" jellel.
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="H5_288K.js"></script>
<script type="text/javascript" src="H5_299K.js"></script>
<script>
$( document ).ready(function() {
function Row (F1, F2) {
this.f1 = F1;
this.f2 = F2;
this.d288 = null;
this.d299 = null;
}
var rows = [];
var voltmar = false;
$.each( data288 , function(j, valj) {
voltmar = false;
for(var i = 0; i < rows.length; i++)
{
if(rows[i].f1 == valj.AssignF1 && rows[i].f2 == valj.AssignF2)
{
voltmar = true;
break;
}
}
if(voltmar == false)
{
var arow = new Row(valj.AssignF1, valj.AssignF2);
arow.d288 = valj.Dist;
arow.d299 = "--";
rows.push(arow);
}
});
$.each( data299 , function(j, valj) {
voltmar = false;
for(var i = 0; i < rows.length; i++)
{
if(rows[i].f1 == valj.AssignF1 && rows[i].f2 == valj.AssignF2)
{
rows[i].d299 = valj.Dist;
voltmar = true;
break;
}
}
if(voltmar == false)
{
var arow = new Row(valj.AssignF1, valj.AssignF2);
arow.d288 = "--";
arow.d299 = valj.Dist;
rows.push(arow);
}
});
var tablazat="<center><table>";
tablazat +="<tr><th>Name</th><th>288K</th><th>299K</th></tr>";
for(var i = 0; i < rows.length; i++)
{
tablazat +="<tr>";
tablazat += "<td>"+rows[i].f1+" - "+rows[i].f2+"</td><td>"+rows[i].d288+"</td><td>"+rows[i].d299+"</td></tr>";
}
tablazat+="</table></center>";
$("body").append(tablazat);
});
</script>
<style>
td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
table {
border-collapse: collapse;
}
th{
border: 1px solid black;
text-align: center;
background: #2EFEF7;
}
</style>
</head>
<body>
</body>
</html>
Beadható feladat #1: Adott, az előző feladathoz hasonló, öt hőmérsékleten megmért hidrogén - hidrogén távolságok: H5_277K, H5_288K, H5_299K, H5_310K és H5_321K. Feladat:
1. Az előző feladathoz hasonló táblázat elkészítése, aminek most már 6 oszlopa lesz: megnevezés, 277K, 288K, 299K, 310K, 321K. Ahol nincs adat, ott megint a "--" jelölést használjuk.
2. Példa: könyvkatalógus
Tekintsük a következő HTML oldalt, ami egy könyvkatalógust demonstrál:
<html>
<head>
<title>jquery</title>
</head>
<body>
<div tag="books">
<div tag="book">
<div tag="title">XML Developer's Guide</div>
<div tag="author">Gambardella, Matthew</div>
<div tag="publish_date">2000-10-01</div>
<div tag="price">44.95</div>
<div tag="description">An in-depth look at creating applications
with XML.</div>
</div>
<div tag="book">
<div tag="title">Ralls, Kim</div>
<div tag="author">Midnight Rain</div>
<div tag="price">5.95</div>
<div tag="publish_date">2000-12-16</div>
</div>
<div tag="book">
<div tag="title">Corets, Eva</div>
<div tag="author">Maeve Ascendant</div>
<div tag="price">5.95</div>
<div tag="publish_date">2000-11-17</div>
<div tag="genre">Fantasy</div>
</div>
<div tag="book">
<div tag="title">Randall, Cynthia</div>
<div tag="author">Lover Birds</div>
<div tag="price">4.95</div>
<div tag="description">When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</div>
</div>
<div tag="book">
<div tag="title">Thurman, Paula</div>
<div tag="author">Splish Splash</div>
<div tag="price">4.95</div>
<div tag="genre">Romance</div>
</div>
</div>
</body>
</html>
Feladat: ezt a HTML szerkezetet konvertáljuk át táblázattá, ahol az oszlopok nevei az egyes tag nevek (title, author, price, ...)
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
var cols = [];
var books = $("div[tag='book']");
var voltmar;
books.each(function(i) {
var children = $(this).children();
children.each(function(i) {
var tag = $(this).attr("tag");
voltmar = false;
for(var k = 0; k < cols.length; k++)
{
if(cols[k] == tag)
{
voltmar = true;
break;
}
}
if(voltmar == false)
cols.push(tag);
});
});
var tablazat="<center><table><tr>";
for(var i = 0; i < cols.length; i++)
{
tablazat +="<th>"+cols[i]+"</th>";
}
tablazat +="</tr>";
books.each(function(i) {
//var children = .children();
tablazat +="<tr>";
for(var i = 0; i < cols.length; i++)
{
var match = $(this).children("div[tag='"+cols[i]+"']");
console.log(match);
if(match.length > 0)
{
tablazat +="<td>"+match.text()+"</td>";
} else {
tablazat +="<td>--</td>";
}
}
tablazat +="</tr>";
});
tablazat+="</table></center>";
$("div[tag='books']").after(tablazat);
});
</script>
<style>
td{
border: 1px solid black;
padding: 15px;
text-align: center;
}
table {
border-collapse: collapse;
width:80%;
}
th{
border: 1px solid black;
text-align: left;
background: #2EFEF7;
}
</style>
</head>
<body>
<div tag="books">
<div tag="book">
<div tag="title">XML Developer's Guide</div>
<div tag="author">Gambardella, Matthew</div>
<div tag="publish_date">2000-10-01</div>
<div tag="price">44.95</div>
<div tag="description">An in-depth look at creating applications with XML.</div>
</div>
<div tag="book">
<div tag="title">Ralls, Kim</div>
<div tag="author">Midnight Rain</div>
<div tag="price">5.95</div>
<div tag="publish_date">2000-12-16</div>
</div>
<div tag="book">
<div tag="title">Corets, Eva</div>
<div tag="author">Maeve Ascendant</div>
<div tag="price">5.95</div>
<div tag="publish_date">2000-11-17</div>
<div tag="genre">Fantasy</div>
</div>
<div tag="book">
<div tag="title">Randall, Cynthia</div>
<div tag="author">Lover Birds</div>
<div tag="price">4.95</div>
<div tag="description">When Carla meets Paul at an ornithology conference, tempers fly as feathers get ruffled.</div>
</div>
<div tag="book">
<div tag="title">Thurman, Paula</div>
<div tag="author">Splish Splash</div>
<div tag="price">4.95</div>
<div tag="genre">Romance</div>
</div>
</div>
</body>
</html>
Beadható feladat #2: Az előző feladat mintájára át kell konvertálni az alábbi HTML szerkezetet táblázattá, természetesen teljesen automatikusan. VIGYÁZAT: ha egy div elemnek nincs szöveg tartalma (azaz csak újabb div-ket tartalmazz), akkor annak nem kell oszlopot készíteni. Pl. nem kell olyan oszlop, hogy c, uis azoknak nincs szöveg eleme.
<html>
<head>
<title>jquery</title>
</head>
<body>
<div tag="ead">
<div tag="dsc">
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.302</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="physdesc">
<div tag="extent">1.25</div>
<div tag="extentunit">meter</div>
</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.331.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a05_1</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.302</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="physdesc">
<div tag="extent">1.25</div>
<div tag="extentunit">meter</div>
</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.332.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a02_1</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.303</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="physdesc">
<div tag="extent">1.25</div>
<div tag="extentunit">meter</div>
</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.334.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a06_1</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.304</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.334.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a06_1</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.305</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.334.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a06_1</div>
<div tag="address">
<div tag="addressline">Ismeretlen</div>
<div tag="comment">nincs</div>
</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.306</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="Tervazonosíto">HU BFL - XV.17.f.334.b - a5/1</div>
<div tag="Digitáliskep">HU_BFL_XV_17_f_331_a06_1</div>
<div tag="Epitteto">ismeretlen</div>
<div tag="Tervezo">Ybl Miklós</div>
<div tag="Kivitelezo">--</div>
<div tag="address">
<div tag="addressline">Budapest, Vadász u. 30.</div>
<div tag="comment">nincs</div>
</div>
</div>
<div tag="c">
<div tag="unitid">HU BFL XV.17.a.307</div>
<div tag="unittitle">Építő Bizottmány (BMT)</div>
<div tag="unitdate">1850-1873</div>
<div tag="gencomment">
<div tag="Ugyazonosíto">0002/ a154</div>
<div tag="keldatum">1897</div>
<div tag="repository">
<div tag="corpname">Budapest Főváros Levéltára</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3. Példa: tartalomjegyzék
Vegyük a következő HTML oldalt, feladatunk, hogy ebből a felépítésből hozzuk létre az oldalhoz tartozó tartalomjegyzéket, melyben az egyes címeket a title tartalmazza
<html>
<head>
<title>jquery</title>
</head>
<body>
<div id="content">
<div title="Focim">
<div title="alcim1">
<div title="alalcim1">
<div title="alalalcim1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim3">
<div title="alalalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim2">
<div title="alalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim6">
<div title="alalalcim6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim2">
<div title="alalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim8">
<div title="alalalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
</div>
</body>
</html>
És a megoldás:
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
function PrintTitle(htmlelem)
{
$("#toc").append(htmlelem.attr("title")+"<br/>");
htmlelem.children().each(function () {
PrintTitle($(this));
});
}
$("#content").before("<div id='toc'></div><br/><br/>");
PrintTitle($("div[title='Focim']"));
});
</script>
</head>
<body>
<div id="content">
<div title="Focim">
<div title="alcim1">
<div title="alalcim1">
<div title="alalalcim1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim3">
<div title="alalalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim2">
<div title="alalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim6">
<div title="alalalcim6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim2">
<div title="alalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim8">
<div title="alalalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
</div>
</body>
</html>
Most határozzuk meg az egyes címek szintjeit és ennek alapján toljuk el jobbra az egyes szintek címjeit (padding-left)
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$( document ).ready(function() {
function PrintTitle(htmlelem, mylevel)
{
var pad = mylevel * 20;
$("#toc").append("<p style='padding-left:"+pad+"px'>"+mylevel+". "+htmlelem.attr("title")+"</p>");
mylevel++;
htmlelem.children().each(function () {
PrintTitle($(this), mylevel);
});
}
$("#content").before("<div id='toc'></div><br/><br/>");
var level = 0;
PrintTitle($("div[title='Focim']"), level);
});
</script>
</head>
<body>
<div id="content">
<div title="Focim">
<div title="alcim1">
<div title="alalcim1">
<div title="alalalcim1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim3">
<div title="alalalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim2">
<div title="alalcim4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim6">
<div title="alalalcim6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
<div title="alcim3">
<div title="alalcim7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
<div title="alalcim8">
<div title="alalalcim8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
<div title="alalcim9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue neque, imperdiet egestas pharetra at, sodales ac eros.
</div>
</div>
</div>
</div>
</body>
</html>
Beadható feladat #3: Módosítsuk a fenti algoritmust úgy, hogy kiírja az egyes címek elé a szintjét az alábbi módon:
Az algorimusnak természetesen teljesen általánosnak kell lennie, ne csak erre a példára müködjön.
4. Példa: egy minta példa
Adott egy adatsor, ami egy cég vásárlóit tartalmazza. Feladat:
a) az adatok közül jelenítsük meg táblázatosan a vásárlókódot, nevet és az bevételt.
b) minden sor első sora legyen checkbox, ami által több sor is kijelölhető. Az oldal tetején legyen egy 'Törlés' gomb, amit megnyomva az összes, checkboxxal kijelölt sor törlödik a táblázatból.
c) Az oldalon valahol hozzunk lérte egy új vásárló felvételére alkalmas formot. Ezt a formot kitöltve és a 'Hozzáadás' gombra kattintva a frissen definiált vásárló hozzáadódik a táblázat elejére.
<html>
<head>
<title>jquery</title>
<meta charset='UTF-8'>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="customers.js"></script>
<script>
$( document ).ready(function() {
$( "#torles" ).click(function() {
$('table').find('input[type="checkbox"]:checked').each(function () {
$(this).parent().parent().remove();
});
});
$( "#ujvasarlo" ).click(function() {
var error = false;
// üres sorok ellenőrzése
if( !$('#vkod').val() ) {
error = true;
alert('Vásárlókód üres');
}
if( !$('#vnev').val() ) {
error = true;
alert('Név üres');
}
if( !$('#bevetel').val() ) {
error = true;
alert('Bevétel üres');
}
if(error == false)
{
var sor = "<tr><td><input type='checkbox' class='kijelol' /></td><td>"+$('#vkod').val()+
"</td><td>"+$('#vnev').val()+"</td><td>"+$('#bevetel').val()+"</td></tr>";
$('#vkod').val('');$('#vnev').val(''); $('#bevetel').val('');
$('table tr:eq(0)').after(sor);
}
});
var tablazat="<table>";
tablazat +="<tr><th>Kijelölés</th><th>Vásárlókód</th><th>Név</th><th>Bevétel</th></tr>";
$.each( customers , function(j, customer) {
tablazat +="<tr>";
tablazat += "<td><input type='checkbox' class='kijelol' /></td><td>"+customer.vasarlokod+
"</td><td>"+customer.nev+"</td><td>"+customer.bevetel+"</td>";
tablazat +="</tr>";
});
tablazat+="</table>";
$("body").append(tablazat);
});
</script>
<style>
td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
table {
border-collapse: collapse;
}
th{
border: 1px solid black;
text-align: center;
background: #2EFEF7;
}
</style>
</head>
<body>
<div>
Vásárlódok: <input type="text" id="vkod"><br/>
Név: <input type="text" id="vnev" ><br/>
Bevétel: <input type="text" id="bevetel"><br/>
<button id="ujvasarlo">Hozzáadás</button><br/><br/>
</div>
<button id="torles">Sor(ok) törlése</button>
</body>
</html>