1

введите сюда описание изображения

$(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();

  });


});
9
  • нижний кусок кода это, если бы была бы одна запись, а так их тысячи к примеру и я не знаю как получить эти два id после нажатия 8 мар 2019 в 16:22
  • 1
    Я ничего не понял.
    – user176262
    8 мар 2019 в 16:26
  • крч есть таблица , в ней есть блоки , которые скрыты. нажимаю на стрелочку(лэйбл ) и появляется блок , нажимаю обратно он закрывается. Если одна запись в таблице(одна строчка), то ок (кусок кода) , а если этих строчек 1к? то надо получить id лэйбла и id дива <div id='.$id_subT.'> 8 мар 2019 в 16:29
  • Создайте в вопросе пример html-а такой таблицы - без фрагментов php.
    – user176262
    8 мар 2019 в 16:38
  • создал....наверху 8 мар 2019 в 16:43

2 ответа 2

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>

10
  • да да да , почти , только у меня скрытый блок выезжает сразу под строчкой где стрелочка ,и потом под этим блоком строчки продолжаются, а у вас под таблицей.... и вы перекопировали дважды , а я хочу, чтоб sub_m и subtable создавалось поновой с циклом фор (php код , там написано) и потом уже нажимая они появлялись 8 мар 2019 в 18:34
  • Ну тогда даже лучше. Кот тоже работать будет. Только tdd добавить если надо скрывать показывать. Я у себя не стал скрывать.
    – coder675
    8 мар 2019 в 18:41
  • у вас вот написать Substable , а мне тогда что писать , если я юзаю <div id='.$id_subT.'> ? 8 мар 2019 в 18:45
  • По моему это переменная php кода. Вы должны понимать что у вас получится там в итоге.
    – coder675
    8 мар 2019 в 19:04
  • да , я понимаю , что в итоге будет Substable1 Substable2 Substable3 и тд , но вот тогда ваш метод не работает(((((((((((((((. 8 мар 2019 в 19:06
0

По нажатию на элемент в таблице получаешь его 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>

10
  • ок, а как мне тогда прочитать и id лэйбла и потом еще id дива где subtable ?так как он то и скрыт ...так как subtable скрыт и мы нажимаем на стрелочку(лабел) и он появляется п.с. там есть наверху jq код , который здесь не запускается (не умею), а так он работает . вот как мне вставить за место sub_m4 и за место Subtable то два ид , которое я узнаю при нажатии 8 мар 2019 в 17:28
  • вам в этом помогут ментоды .parent(), .childs(), .find(), .each() 8 мар 2019 в 17:30
  • вот each я как раз пробовал , но не выходит 8 мар 2019 в 17:30
  • @СаскеУчиха обновил ответ 8 мар 2019 в 17:37
  • у вас по нажатию на одно и на второе, а мне надо было бы , где я нажимаю на sub_m1 и там уже узнается id Subtable не нажимая по нему... он скрыт. я узнаю id (ну допустим узнал )sub_m1 и нажал и выехал блок subtable(посмотрите мой jquery код наверху)... 8 мар 2019 в 17:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.