pošlji email iz tabele s pomočjo javascript

Pošlji email iz tabele s pomočjo JavaScript

V celico td bomo vpisali preprosto JavaScript kodo za pošiljanje elektronske pošte, ko z miškinim gumbom kliknemo na element. Ob kliku na element se nam bo odprlo novo okno, kjer dobimo ponudbo, s katerim email-om želimo poslati pošto (če jih imamo več). Izberemo pravega in odprla se nam bo aplikacija (Outlook, Thunderbird, Gmail, itd.), iz katere bomo poslali pošto uporabniku, ki je vpisan pod to celico. Vpisali smo preprosto kodo, ki je izredno učinkovita, več o tem v JavaScript vadnici.

onclick="window.open('mailto:email uporabnika')"

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>tabele</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

.table {
            display: table;
            table-layout: fixed;
            margin: 20px auto 0;
            width: 90%;
            border: 4px double rgba(0, 0, 0, 0.2);
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            background: lightblue;
            filter: drop-shadow(0 2mm 0.45em yellow);
            box-shadow: 0 12px 17px rgba(0, 0, 0, 0.19), 0 12px 17px rgba(0, 0, 0, 0.19);
        }

.table thead {
            background: greenyellow;
            box-shadow: 0 2px 7px rgba(0, 0, 0, 0.9), 2px 0 7px rgba(0, 0, 0, 0.9);
        }

.table thead th {
            padding: 10px;
            text-align: left;
            text-transform: uppercase;
        }

.table thead th:first-child {
            border-top-left-radius: 6px;
        }

.table thead th:last-child {
            border-top-right-radius: 6px;
        }

.table tbody {
            background: linear-gradient(180deg, yellow, lightgoldenrodyellow, orange);
        }

.table tbody td {
            padding: 10px;
            text-align: left;
            text-transform: capitalize;
            word-wrap: break-word;
        }

.table tbody td:last-child {
            text-transform: none;
        }
                    
        .table tbody td:last-child:hover {
            transition: 0.5s;
            background: yellow;
            box-shadow: 0 2px 3pc rgba(0, 0, 0, 0.4), 2px 0 3pc rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }

@media screen and (max-width: 600px){
            .table thead {
                display: none;
            }
            .table tbody td {
                display: block;
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<table class="table">
    <thead>
    <tr>
        <th>ime</th>
        <th>priimek</th>
        <th>email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>prva</td>
        <td>oseba</td>
        <td onclick="window.open('mailto:po@email.demo')">po@email.demo</td>
    </tr>
    <tr>
        <td>druga</td>
        <td>oseba</td>
        <td onclick="window.open('mailto:do@email.demo')">do@email.demo</td>
    </tr>
    <tr>
        <td>tretja</td>
        <td>oseba</td>
        <td onclick="window.open('mailto:to@email.demo')">to@email.demo</td>
    </tr>
    <tr>
        <td>četrta</td>
        <td>oseba</td>
        <td onclick="window.open('mailto:co@email.demo')">co@email.demo</td>
    </tr>
    <tr>
        <td>peta</td>
        <td>oseba</td>
        <td onclick="window.open('mailto:peta@email.demo')">peta@email.demo</td>
    </tr>
    </tbody>
</table>
</body>
</html>