JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<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>&nbsp;</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 type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
   

    </script>
</body>

CSS

html {
background: url(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;
}
 
 
 
/* Tabelleneigenschaften */
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...

JavaScript

$("#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')
            });
       
 
      });   
      });