如何读取表的点击行的第一列中的js？

问题描述 投票：0回答：2

我有一个由7列的表。有一个在第一列的产品名称和第七列中的链接。当我点击链接jQuery的对话框出现一些信息给那里。单击OK按钮，对话框关闭后。

我想这样做的是读取其中的链接被点击的行的第一列的内容。

我不知道如何在JS / jQuery的做到这一点。任何人可以帮助我请？

我附上代码的波纹管部分：

$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});

<div id="dialog-message1" title="Informacje o potrawie">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>

screen1

更新：我把整个代码更好的理解。现在，当第一列是“提取”（谢谢！）我想将它放在这个jQuery对话框窗口对话框的MESSAGE1。我能得到一些帮助，这好吗？

<?php
session_start();

if (!isset($_SESSION["login"])){
        header("Location: login.php");
        exit();
}

include 'db_connection.php';
include 'functions.php';


//obliczanie danych na potrzeby stronicowania
$cur_page = isset($_GET['page']) ? $_GET['page'] : 1;
$results_per_page = 26; //Liczba wyników na stronę
$skip = (($cur_page - 1) * $results_per_page); //liczba pomijanych wierszy na potrzeby stronicowania

if (isset($T_szukanaNazwa)){
        $query = "SELECT * FROM potrawy WHERE nazwa LIKE '%".$T_szukanaNazwa."%'";
} else {
        $query = "SELECT * FROM potrawy";
}

$data = mysqli_query($conn, $query); //pobieramy wszystkie wiersze

$total = mysqli_num_rows($data); //liczba wierszy zapisana na potrzeby stronicowania
$num_pages = ceil($total / $results_per_page); //określenie liczby stron
$query .=  " LIMIT $skip, $results_per_page"; //dopisujemy do wcześniejszego zapytania, klauzule LIMIT

?>


<table class="TabelaSzara1">
<thead>
<tr>
<th width="320px">Nazwa potrawy</th>
<th width="70px">Waga (g)</th>
<th width="80px">Kalorie (Kcal)</th>
<th width="80px">Białko (g)</th>
<th width="80px">Tłuszcze (g)</th>
<th width="100px">Węglowodany (g)</th>
<th width="30px"></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">
<div class="links">

<?php
//wyświetlanie nawigację przy stronnicowaniu
if ($num_pages > 1) {
     echo generate_page_links_potrawy($cur_page, $num_pages);
}
?>

</div>
</td>
</tr>
</tfoot>

<tbody>

<?php

//wykonanie kwerendy
$result = mysqli_query($conn, $query);

while($row = mysqli_fetch_array($result))
{
        echo "<tr>";
        echo "<td>".$row['nazwa']."</td>" ;
        echo "<td>".$row['waga']."</td>" ;
        echo "<td>".$row['kalorie']."</td>" ;
        echo "<td>".$row['bialko']."</td>" ;
        echo "<td>".$row['tluszcze']."</td>" ;
        echo "<td>".$row['weglowodany']."</td>" ;
        echo "<td style='text-align:center'>" ;

        $T_nazwa=$row['nazwa'];

        echo "<a href='usunPotrawa.php?name=".$T_nazwa."' title='Usuń' class='confirmation'><img src='pictures/cross16.jpg' width='10' height='10' /></a>" ;
        echo "<a href='infoPotrawa.php?name=".$T_nazwa."' title='Informacja' class='confirmation1'><img src='pictures/question16.jpg' width='10' height='10' /></a>" ;

        echo "</td>" ;
        echo "</tr>";
}

mysqli_close($conn);

?>


<div id="dialog-message" title="Usuwanie potrawy">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>


<div id="dialog-message1" title="Informacje o potrawie">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>


<script type="text/javascript">

    $("#dialog-message").hide();
    $('.confirmation').on('click', function(e) {
        e.preventDefault();
        var lnk = $(this).attr('href');
        $("#dialog-message").dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                    window.location.href = lnk;
                },
                Anuluj: function() {
                    $(this).dialog("close");
                }
            }
        });
    });

    $("#dialog-message1").hide();
    $('.confirmation1').on('click', function(e) {
        e.preventDefault();
        var lnk = $(this).attr('href');
        var product_name = $(this).parents("tr").find("td").first().html();
        console.log(product_name);
        $("#dialog-message1").dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
        });
    });





</script>

<form>
        <fieldset id="SzukanieProduktu">
        <legend>Wyszukaj potrawę</legend>

        <div>
        <input id="akcja" name="akcja" type="hidden" value="potrawy">
        </div>

        <div>
        <label for="szukanaNazwa" id="LS1">Nazwa potrawy</label>
        <p>
        <input id="szukanaNazwa" name="szukanaNazwa" type="text" maxlength="255" required>
        </p>
        </div>

        <button title="Szukaj" type="submit" value="Submit" id="Szukaj"> <img src="pictures/search32.jpg" /></button>

        </fieldset>

</form>




<form>
        <fieldset id="DodawanieProduktu">
        <legend>Nowy produkt</legend>

        <div>
        <input id="akcja" name="akcja" type="hidden" value="dodajPotrawa">
        </div>

        <div>
        <label for="name" id="L1">Nazwa produktu</label>
        <input id="name" name="name" type="text" maxlength="255" required>
        </div>

        <div>
        <label for="kalorie" id="L2">Kalorie (Kcal)</label>
        <input id="kalorie" name="kalorie" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="bialko" id="L3">Białko (g)</label>
        <input id="bialko" name="bialko" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="tluszcze" id="L4">Tłuszcze (g)</label>
        <input id="tluszcze" name="tluszcze" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <div>
        <label for="weglowodany" id="L5">Węglowodany (g)</label>
        <input id="weglowodany" name="weglowodany" type="text" maxlength="10" pattern="[0-9\s]{1,6}\.[0-9]{2}" title="Format #.##" required>
        </div>

        <button title="Zapisz" type="submit" value="Submit" id="Dodaj"> <img src="pictures/save32.jpg" /></button>

        </fieldset>


        <fieldset id="PomocProduktu">
        <legend>Opis procedury dodawania produktu</legend>

        <div>
        <label id="H1">Krok 1: Wpisz nazwę produktu</label>
        </div>

        <div>
        <label id="H2">Krok 2: Wpisz liczbę kalorii na 100g produktu</label>
        </div>

        <div>
        <label id="H3">Krok 3: Wpisz ilość białka (g)</label>
        </div>

        <div>
        <label id="H4">Krok 4: Wpisz ilość tłuszczu (g)</label>
        </div>

        <div>
        <label id="H5">Krok 5: Wpisz ilość węglowodanów (g)</label>
        </div>

        <div>
        <label id="H6">Krok 6: Naciśnij ikonę dyskietki aby zapisać</label>
        </div>

        </fieldset>


        <fieldset id="PomocUsuwanie">
        <legend>Opis procedury usuwania produktu</legend>

        <div>
        <label id="H11">Krok 1: Odszukaj produkt w tablei produktów</label>
        </div>

        <div>
        <label id="H12">Krok 2: Kliknij ikone krzyżyka aby usunąć produkt</label>
        </div>

        <div>
        <label id="H13">Krok 3: Potwierdź usunięcie produktu przyciskiem OK</label>
        </div>

        </fieldset>

</form>
</tbody>
</table>
javascript jquery html
2个回答
1
投票

既然你下面提供有限的代码只是不知道你的实际代码快速“盲”的方法。

$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();
    console.log(product_name);

    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});
0
投票

检查该代码

 $(document).ready(function(){
$('.confirmation1').on('click', function(e) {
    e.preventDefault();

    var first_td = $(this).parent().siblings(":first").text();
    alert(first_td);
    var lnk = $(this).attr('href');
    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
});

});

我已经使用这个HTML表测试

   <h2>HTML Table</h2>

    <table>
    <tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Company</th>
<th>Contact</th>
 </tr>
 <tr>
<td>Alfreds Futterkiste</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
 <td><a class='confirmation1' href='#'>test</a></td>
 </tr>
 <tr>
<td>Centro comercial Moctezuma</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td><a class='confirmation1' href='#'>test</a></td>
</tr>
 <tr>
<td>Ernst Handel</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Roland Mendel</td>
<td><a class='confirmation1' href='#'>test</a></td>
</tr>
<tr>
<td>Island Trading</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
<td><a class='confirmation1' href='#'>test</a></td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
 <td><a class='confirmation1' href='#'>test</a></td>
 </tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td><a class='confirmation1' href='#'>test</a></td>
</tr>
</table>
<div class="confirmation1">check</div> 
<div id="dialog-message1" title="Informacje o potrawie"><p>
<span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"> 
</span>Czy chcesz usunąć wybraną potrawe?
</p>   <p>Naciśnij OK aby kontynuować.</p>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.