javascript - 如何在js中读取表格的第一列?
问题描述
我有一个包含 7 列的表。第一列有产品名称,第 7 列有链接。当我单击链接时,jquery 对话框出现并在那里给出了一些信息。单击确定按钮后对话框关闭。
我想做的是阅读单击链接的行的第一列的内容。
我不知道如何在 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>
更新:为了更好地理解,我放了整个代码。现在第一列是“提取”(谢谢!)我想把它放在这个jquery对话框窗口dialog-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>
解决方案
由于您在下面提供了有限的代码,这只是一种快速的“盲目”方法,而不知道您的实际代码。
$('.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");
}
}
});
});
推荐阅读
- jquery - 在 jQuery 中重新定义几个 li 元素的 CSS 的问题
- java - 来自列表的@TypeConverter
to String in Room Android gson.toJson(List ) - python - 如何将外部脚本加载到 Flask 应用程序路由中
- php - 使用 PHP 将 HTML 片段渲染为 PNG
- google-cloud-platform - 将 `gcloud beta functions deploy` 命令转换为带有 FailurePolicy 的 Deployment Manager 模板
- postgresql - 错误:列“table.column_name”必须出现在 GROUP BY 子句中或在聚合函数中使用
- oracle - ORA-00936: 缺少表达式 - 第 62 行
- php - 你如何使用 Laravel 基于特定列选择 distinct() 模型?
- django-queryset - 我可以将 django orm 的列作为字符串 + 变量访问吗?
- python - Python Pandas 使用 [groupby] 时对中间列的排序