JS / jQuery für eine anklickbare Tabellenzeile
Hallo!
Über das hier bestehende Portal-Programm habe ich eine Tabelle aufgebaut und CSS mäßig bearbeitet und bin noch dabei. Bspw. wird Spalte eins in der Schrift und Hover Reaktion noch anders. Pointer als Maus usw. Also ziemlich gut gelaufen und bis hierhin in Ordnung.
Ergebnis im Anhang.
Aber:
Das Programm sieht es vor bestimmte Spalten zu definieren welche als Link fungieren. Nun Wollte ich aber, deswegen auch der Pointer, die ganze Tabellenzeile anklickbar machen. Nach kurzem googlen gibt es einige Lösungen. Nun ist es aber in meinem Fall nicht so einfach das HTML der Tabelle anzutasten. Einfacher wäre ein zusätzliches JS, welches den Job erledigt.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
html {
background: url(/image/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
th {
border: 0px;
font-weight: bold;
text-decoration: underline;
height: 34px;
width: 180px;
font-size: 110%;
text-align: center;
color: black;
}
td {
border: 0px;
height: 34px;
width: 180px;
text-align: center;
}
/* Link-Eigenschaften */
a.class1 {
background-color: #c2c9d1;
color: black;
width: 160px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 9px;
}
a.class1:hover, a.class1:active {
background-color: #DEF2FC;
}
.not-active {
pointer-events: none;
cursor: default;
}
#openModal1:hover{
color:red;
cursor:pointer;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
display:none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.modalDialog > div {
width: 70%;
top:25%;
position: relative;
margin: 0% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
/* Link-Eigenschaften hidden */
a.class2:link, a.class2:visited {
text-decoration:none;
color:Yellow;
}
/* Buttoneigenschaften */
.btn{
background-color: #c2c9d1;
color: #c2c9d1;
width: 160px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 9px;
pointer-events: none;
border: 0px;
}
/* Sonstige Eigenschaften */
p {
font-weight: bold;
color: red;
}
h1 {
color: Black;
}
table{
border:1px solid black;
}
td,th{
border:1px solid black;
}
.trlink:hover{
background:green;
}
</style>
<body>
<center>
<table id="meine_tabelle">
<thead>
<tr >
<th class="col1" id="rang"><div>Rang</div></th>
<th class="col2 flag" id="penner"><div>Penner</div></th>
<th class="col3 flag" id="bande"><div>Bande</div></th>
<th class="col4 flag" id="stadtteil"><div>Stadtteil</div></th>
<th class="col5 flag" id="punkte"><div>Punkte</div></th>
<th class="col6 search" id="btn-search"><div> </div></th>
</tr>
</thead>
<tbody>
<tr class="trlink" href="http://sebastian1012.bplaced.net"class="odd">
<td class="col1 neutral">1.</td>
<td class="col2">ssssss</td>
<td class="col3">dfghgf</td>
<td class="col4">St.Pauli</td>
<td class="col5" title="None">228,409 Millionen</td>
<td class="col6">dddddd</td>
</tr>
<tr class="trlink" href="http://sebastian1012.bplaced.net/dreieckgenerator.html"class="even">
<td class="col1 neutral">2.</td>
<td class="col2">ffffff</td>
<td class="col3">fewfweferwf</td>
<td class="col4">St.Pauli</td>
<td class="col5" title="None">118,026 Millionen</td>
<td class="col6"> </td>
</tr>
</tbody></table>
</center>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p id="zlink"></p>
</div>
</div>
<script>
$("#meine_tabelle .trlink").css("cursor","pointer");
$("#meine_tabelle .trlink").click(function(){
var link = $(this).attr("href");
$("table tr td:nth-child(1)").each(function (idx, ele) {
$('#openModal').css('display', 'block')
$('#zlink').html(' Hier ist der Link aus der Tabelle <br><a href="'+link+'">'+link+'</a>');
$('.close').click(function () {
$('#openModal').css('display', 'none')
});
});
});
</script>
</body>