Узнать id по нажатию jQuery
140
17 ноября 2019, 10:30
$(document).ready(function () {
$("#sub_m4").click(function () {
$("#Subtable4").fadeToggle();
});
$(fadeout).click(function () {
$("#sub_m4").fadeOut();
});
$(fadein).click(function () {
$("#sub_m4").fadeIn();
});
});table{
border:2px solid grey;
}
th{
width:30%;
}
tr{
width:100%;
border-bottom: 2px solid black;
}
table tr{
text-align: center;
}
.dws-menu *{
margin:0;
padding: 0;
}
.dws-menu tr [type="checkbox"]{
display: none;
}
.dws-menu label.toogleSubmenu .fa::before{
content: "\f0d7";
color: black;
font-weight: bold;
font-size: 20px;
}
.dws-menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before{
content: "\f0d8";
color: #ffffff;
color: black;
font-weight: bold;
font-size: 20px;
}
.dws-menu input.toogleSubmenu:checked ~ label.toogleSubmenu .fa::before{
content: "\f0d8";
color: #ffffff;
color: black;
font-weight: bold;
font-size: 20px;
}
#Subtable4 {
display: none;
width: 100%;
}
#Stip{
text-align: center;
width: 100%;
}
#Subtable p{
border-bottom:1px solid grey;
}
#Kopmitne{
width: 100%;
text-align: center;
}
.text{
width: 100%;
border-left:1px solid grey;
}
.table_row {
margin: 0 auto;
width: 300%;
display: flex;
justify-content: center;
}
#tdd{
display: none;
width: 100%;
border-top:4px solid grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"><link rel="stylesheet" type="text/css" href="css/tabula.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/menu.js"></script>
<script src="https://use.fontawesome.com/320ac68418.js"></script>
</head>
<body>
<div id="page-wrap">
<nav class="dws-menu">
<table width="100%" id="table">
<thead>
<tr>
<th class="th_width">###</th>
<th class="th_width">###</th>
<th class="th_width">###</th>
</tr>
</thead>
<tbody>
<tr>
<td>##</td>
<td>###</td></td>
<td>### </td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu" id="sub_m4">
<label for="sub_m4" class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr class="table_row">
<td id="tdd">
<div id="Subtable4">
<div id="Stip">
<p>Stip
<span class="text">Jjjj</span></p>
</div>
<div id="Kop">
<p >Kop
<span class="text">Jjjj</span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</nav>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/menu.js"></script>
<script src="https://use.fontawesome.com/320ac68418.js"></script>
</head>
<body>
<div id="page-wrap">
<header>
<nav class="dws-menu">
<table width="100%" id="table">
<thead>
<tr>
<th class="th_width">№№</th>
<th class="th_width">№№</th>
<th class="th_width">№№</th>
</tr>
</thead>
<tbody>
<tr>
<td>SSS</td>
<td>SSS</td></td>
<td>SSS</td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu" id="sub_m4">
<label for="sub_m4" class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr class="table_row">
<td id="tdd">
<div id="Subtable4">
<div id="Stip">
<p>Stip
<span class="text">##</span></p>
</div>
<div id="Kop">
<p >Kop
<span class="text">##</span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</nav>
</div>
</body>
</html><tr>
<td>###</td>
<td>###</td></td>
<td>### </td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu" id="#sub_m4">
<label for="sub_m4" class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr class="table_row">
<td id="tdd">
<div id="#Subtable4">
<div class="Myclass"id="###">
<p>S
<span class="text">jjj</span></p>
</div>
<div id="#####">
<p >Kkk
<span class="text">jjjj</span></p>
</div>
</div>
</td>
</tr>вот
<tr>
<td>ttt</td>
<td>ttt</td></td>
<td>ttt</td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu"
id='.$id.'>
<label for='.$id.' class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr class="table_row">
<td id="tdd">
<div id='.$id_subT.'>
<div class="ClasNAME"id="###">
<p>sss
<span class="text">ppp</span></p>
</div>
<div id="$$$">
<p >KKKK
<span class="text">ppp</span></p>
</div>
</div>
</td>
</tr> нажимаю на input и должна появляется невидимая часть id_SUbT. надо прочитать id label (оно с input одинаково ) и потом прочитать id .$id_subT. и вывести... Если запись одна то не трудно , а если их много , то надо как то читать id по нажатию , я думал each функцию попробовать ,но у меня нечего не выходит , пожалуйста, помогите .
'.$id.'=#sub_m4 '.$id_subT.'=#Subtable4
$(document).ready(function () {
$("#sub_m4").click(function () {
$("#Subtable4").fadeToggle();
});
$(fadeout).click(function () {
$("#sub_m4").fadeOut();
});
$(fadein).click(function () {
$("#sub_m4").fadeIn();
});
});Answer 1
Если я правильно понял, то вы хотите сделать что-то такое. Но не совсем ясно что должно быть в итоге.
$(document).ready(function () {
$("input.toogleSubmenu").click(function () {
$("#Subtable"+$(this).prop("id").substr(5)).fadeToggle();
});
});table{
border:2px solid grey;
}
th{
width:30%;
}
tr{
width:100%;
border-bottom: 2px solid black;
}
table tr{
text-align: center;
}
.dws-menu *{
margin:0;
padding: 0;
}
.dws-menu tr [type="checkbox"]{
display: none;
}
.dws-menu label.toogleSubmenu .fa::before{
content: "\f0d7";
color: black;
font-weight: bold;
font-size: 20px;
}
.dws-menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before{
content: "\f0d8";
color: #ffffff;
color: black;
font-weight: bold;
font-size: 20px;
}
.dws-menu input.toogleSubmenu:checked ~ label.toogleSubmenu .fa::before{
content: "\f0d8";
color: #ffffff;
color: black;
font-weight: bold;
font-size: 20px;
}
#tdd>div {
width: 100%;
display: none;
}
#Stip{
text-align: center;
width: 100%;
}
#Subtable p{
border-bottom:1px solid grey;
}
#Kopmitne{
width: 100%;
text-align: center;
}
.text{
width: 100%;
border-left:1px solid grey;
}
.table_row {
margin: 0 auto;
width: 300%;
display: flex;
justify-content: center;
}
#tdd{
width: 100%;
border-top:4px solid grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"><link rel="stylesheet" type="text/css" href="css/tabula.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/menu.js"></script>
<script src="https://use.fontawesome.com/320ac68418.js"></script>
</head>
<body>
<div id="page-wrap">
<nav class="dws-menu">
<table width="100%" id="table">
<thead>
<tr>
<th class="th_width">a</th>
<th class="th_width">b</th>
<th class="th_width">c</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td></td>
<td>3</td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu" id="sub_m1">
<label for="sub_m1" class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr>
<td>4</td>
<td>5</td></td>
<td>6</td>
<td id="check">
<input type="checkbox" name="toogle" class="toogleSubmenu" id="sub_m2">
<label for="sub_m2" class="toogleSubmenu"><i class="fa"></i></label>
</td>
</tr>
<tr class="table_row">
<td id="tdd">
<div id="Subtable1">12345</div>
<div id="Subtable2">ghty</div>
</td>
</tr>
</tbody>
</table>
</nav>
</div>
</body>
</html>Answer 2
По нажатию на элемент в таблице получаешь его id, если я правильно понял ваш вопрос
//$("td.group").click(function(){
// alert("id товара:" + $(this).parent().find("td:first").attr("class").replace("product_","") + "; " + //$(this).text());
//});
//$("td[class *= product_]").click(function(){
// alert("id товара:" + $(this).attr("class").replace("product_",""));
//});
$("td[class*=product_]").click(function(){
$(this).parent().find(".btn").toggle("slow",()=> {});
});.btn {
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Название</td>
</tr>
</thead>
<tbody>
<tr>
<td class="product_1">Товар 1</td>
<td class="group">Группа 1</td>
<td class="btn"><button>TEST</button></td>
</tr>
<tr>
<td class="product_2">Товар 2</td>
<td class="group">Группа 1</td>
<td class="btn"><button>TEST</button></td>
</tr>
<tr>
<td class="product_3">Товар 3</td>
<td class="group">Группа 2</td>
<td class="btn"><button>TEST</button></td>
</tr>
</tbody>
</table>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47919 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23903 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 27.3.2025 | 15:46