Как использовать ключевое слово this в JavaScript / jQuery для переключения строк

У меня есть форма, которая отправляет данные в таблицу и разделяет данные на две строки, заголовок строки и тело строки (аналогично загрузочному аккордеону card-header и card-body). Первоначально, когда я нажимаю кнопку, она переключает обе строки. Теперь он переключает только тело первой строки.

Как вы используете ключевое слово this, чтобы, когда я нажимаю на button1 на row-header1, он переключает row-body1, а button2 на row-header2 переключает row-body2?

Это код, с которым я работаю, но он содержит ejs:

<table class = "table table-hover table-sm">
<thead>
  <tr>
    <th><i class = "fas fa-cart-plus"></i></th>
    <th>Deadline</th>
    <th>Award</th>
    <th>Fee</th>
    <th>#Copies</th>
    <th>Genre</th>
    <th>More Info</th>
  </tr>
</thead>

<tbody>
  <!--Row header-->
  <tr id = "table-header">
    <% awards.forEach(function(award){ %>
    <td><input type = "checkbox" name = "" value = ""/></td>
    <td><%= award.deadline %></td>
    <td><%= award.awdname %></td>
    <td>$<%= award.fee %></td>
    <td><%= award.copies %></td>
    <td><%= award.genre %></td>
    <td><button id = "moreInfo">Click Me</i></button></td>

  <!--Row body    -->
  <tr id = "table-body">
    <td colspan = "7">
      <div class = "showContent hide"><label for = "">Description:</label> <%= award.desc %></div>
      <div class = "showContent hide"><label for = "">Sponsored by:</label> <%= award.sponsor %></div>
      <div class = "showContent hide"><label for = "">Prize: $</label><%= award.prize %></div>
      <div class = "showContent hide"><label for = "">Shipping status:</label> <%= award.postorarrive %></div>
      <div class = "showContent hide"><label for = "">Website:</label> <%= award.url %></div>
    </td>
  </tr>
  <tr><% }); %></tr>               
</tbody>
</table>

СЦЕНАРИЙ

$("#table-body").hide();

$("#moreInfo").on("click", function() {
    $("#table-body").toggle();
});

См. Мой JSFiddle для модифицированной версии приведенного выше кода, но без ejs.

Я провел несколько дней, рассматривая похожие вопросы и пытаясь адаптировать полученные ответы к моему сценарию, но безуспешно.

проблема в том, что ваш JSFiddle заключается в том, что вы назначаете одинаковые идентификаторы разным элементам, что просто неправильно

— 31.10.2018 06:09

TJS13 вы проверили ответ

— 31.10.2018 09:01

Спасибо за записку, Келлимандем. Изначально у меня не было никаких классов только с идентификаторами, которые я, должно быть, случайно оставил, когда просматривал предыдущие запросы SO и пытался адаптировать его к своему сценарию. Я не забуду относиться к идентификаторам с осторожностью в будущем.

— 31.10.2018 19:43

Может ли кто-нибудь прояснить разницу между $ (this) .parent (). Parent (). Next (). Toggle () Гокуля Маха и $ (this) .closest ('tr'). Next (". Table- тело "). toggle (); Оба работают, но один предпочтительнее или чище, чем другой?

— 31.10.2018 19:54

javascript jquery html html-table toggle

31.10.2018 05:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

233

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы не должны использовать id в качестве селектора для нескольких кнопок, потому что каждый элемент, чтобы его правильно выбрал id, должен быть уникальным и, следовательно, выбираться один за другим. Для общей функциональности, когда нужно выбрать несколько похожих элементов, вместо этого следует использовать class.

<table class = "table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class = "fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead> 
    <tbody>
        <!--Row header-->
        <tr>
            <td>1</td>
            <td><input type = "checkbox" name = "" value = ""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button class = "moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class = "table-body">
            <td colspan = "7" class = "hiddenRow">
                <div class = "showContent"><label for = "">Description1:</label></div>  
            </td>
        </tr> 
        <tr>
            <td>2</td>
            <td><input type = "checkbox" name = "" value = ""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button class = "moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class = "table-body">
            <td colspan = "7" class = "hiddenRow">
                <div class = "showContent"><label for = "">Description2:</label></div>  
            </td>
        </tr> 
    </tbody>
</table>

$(".table-body").hide();
$(".moreInfo").on("click", function(){
    $(this).parent().parent().next().toggle();
});

https://jsfiddle.net/kaxocr7h/1/

обратите внимание, что id должен быть уникальным для элемента.

— 31.10.2018 06:16

БЛАГОДАРЮ ВАС! Это работает не только в jsfiddle, но и в моем реальном коде .ejs!

— 31.10.2018 19:45

31.10.2018 06:14

id должен быть уникальным. Посмотрите на приведенный ниже код с помощью селектора class.

$(document).ready(function() {
  $(".table-body").hide();
  $(".moreInfo").on("click", function() {
    $(this).closest('tr').next(".table-body").toggle();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class = "table table-hover table-sm">
  <thead>
    <tr>
      <td>Row#</td>
      <th><i class = "fas fa-cart-plus"></i></th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <!--Row header-->
    <tr id = "table-header">
      <td>1</td>
      <td><input type = "checkbox" name = "" value = "" /></td>
      <td>Row1 Content1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td><button class = "moreInfo">Click Me</button></td>
    </tr>

    <!--Row body   -->
    <tr class = "table-body">
      <td colspan = "7" class = "hiddenRow">
        <div class = "showContent hide"><label for = "">Description1:</label></div>
      </td>
    </tr>

    <tr id = "table-header">
      <td>2</td>
      <td><input type = "checkbox" name = "" value = "" /></td>
      <td>Row2 Content1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td><button class = "moreInfo">Click Me</button></td>
    </tr>


    <!--Row body   -->
    <tr class = "table-body">
      <td colspan = "7" class = "hiddenRow">
        <div class = "showContent hide"><label for = "">Description2:</label></div>
      </td>
    </tr>

  </tbody>
</table>

31.10.2018 06:21

$(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<table class = "table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class = "fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead>
    
    <tbody>
        <!--Row header-->
        <tr id = "table-header">
            <td>1</td>
            <td><input type = "checkbox" name = "" value = ""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button id = "moreInfo" class = "moreInfo">Click Me</button></td> 
        </tr>
        
        <!--Row body   -->
        <tr id = "table-body" class = "table-body">
            <td colspan = "7" class = "hiddenRow">
                <div class = "showContent hide"><label for = "">Description1:</label></div>  
            </td>
        </tr>
        
        <tr id = "table-header">
            <td>2</td>
            <td><input type = "checkbox" name = "" value = ""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button id = "moreInfo"  class = "moreInfo">Click Me</button></td> 
        </tr>
        
        
        <!--Row body   -->
        <tr id = "table-body" class = "table-body">
            <td colspan = "7" class = "hiddenRow">
                <div class = "showContent hide"><label for = "">Description2:</label></div>  
            </td>
        </tr>
                 
    </tbody>
</table>

Добавьте класс для кнопки moreInfo и строку таблицы, которую нужно переключить

    <table class = "table table-hover table-sm">
        <thead>
            <tr>
                <td>Row#</td>
                <th><i class = "fas fa-cart-plus"></i></th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Details</th>
            </tr>
        </thead>

        <tbody>
            <!--Row header-->
            <tr id = "table-header">
                <td>1</td>
                <td><input type = "checkbox" name = "" value = ""/></td>
                <td>Row1 Content1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td><button id = "moreInfo" class = "moreInfo">Click Me</button></td> 
            </tr>

            <!--Row body   -->
            <tr id = "table-body" class = "table-body">
                <td colspan = "7" class = "hiddenRow">
                    <div class = "showContent hide"><label for = "">Description1:</label></div>  
                </td>
            </tr>

            <tr id = "table-header">
                <td>2</td>
                <td><input type = "checkbox" name = "" value = ""/></td>
                <td>Row2 Content1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td><button id = "moreInfo"  class = "moreInfo">Click Me</button></td> 
            </tr>


            <!--Row body   -->
            <tr id = "table-body" class = "table-body">
                <td colspan = "7" class = "hiddenRow">
                    <div class = "showContent hide"><label for = "">Description2:</label></div>  
                </td>
            </tr>

        </tbody>
    </table>






    $(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

31.10.2018 07:11

Другие вопросы по теме

Проверка загрузки файла формы JQuery

Средство выбора даты не может заполнить поле даты

Добавление частичного представления через ajax

JQuery sortable - привязать новый элемент ('dblclick') к клонированному элементу

Динамическое всплывающее меню параметров и как получить значение параметров из заданного меню

Форматирование поля ввода точками

Закрытые активы - URL-адрес переменной с автоматической загрузкой после отправки формы

JQuery Accordion beforeActivate не работает

Добавление новой функции в прототип jQuery с помощью толстых стрелок

Значение не может быть присвоено переменной после получения из базы данных

Как использовать ключевое слово this в JavaScript / jQuery для переключения строк

Ответы 3

Другие вопросы по теме

Похожие вопросы