как идентифицировать кнопку в таблице, используя jquery?

Question

    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                          <tr>
                            <th>Email</th>
                            <th>Name</th>
                            <th>Subject</th>
                            <th>Message</th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php 
                          foreach($fetchContactData as $value)
                          {
                            ?>
                            <tr>
                              <td><?php echo $value['email'] ?></td>
                              <td><?php echo $value['name']?></td>
                              <td><?php echo $value['subject'] ?></td>
                              <td><button type="button" class="btn btn-warning" value="<?php echo $value['message'] ?>">Show</button></td>
                              <?php   
                            }?>


                          </tbody>
                          <tfoot>
                            <tr>
                              <th>Email</th>
                              <th>Name</th>
                              <th>Subject</th>
                              <th>Message</th>
                            </tr>
                          </tfoot>
                        </table>



      Js code:
    <script type="text/javascript">
        $(document).ready(function(){
          $("#example1 button").click(function(){

          var id=$(this).attr('value');


          });
        });
      </script>

здесь в каждой строке есть уникальный идентификатор кнопки. так что щелкнув по этой кнопке, я хочу этот идентификатор в jquery. Я перепробовал много поисков из stackoverflow, но он не работает, поэтому любой может помочь мне с jquery деталью с точно таким же кодом. Вот мое js, теперь я хочу это длинное сообщение, чтобы я мог показать его в модальном классе div.

[Нарушение] Принудительное перекомпонование при выполнении JavaScript заняло 73 мс ---> Это ошибка, которую я получил

Answer 1

ваша id = кнопка находится в l oop, поэтому не уникальна. Я советую вам не использовать идентификатор, лучше вы можете использовать что-то вроде класса и в вашем скрипте js нажмите на это, например:

<td><button type="button" class="btn btn-warning button_msg"  value="<?php echo $value['message'] ?>">Show</button></td> 

Js (jquery)

  $(".button_msg').click(function(){
//Do anything
})

Answer 2

«Идентификатор» всегда используется для идентификации чего-либо и поэтому должен быть уникальным. Таким образом, вы должны сделать его уникальным в первую очередь. Нечто подобное должно работать.

<table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>Email</th>
                        <th>Name</th>
                        <th>Subject</th>
                        <th>Message</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php 
                      $i = 0;
                      foreach($fetchContactData as $value)
                      {
                        ?>
                        <tr>
                          <td><?php echo $value['email'] ?></td>
                          <td><?php echo $value['name']?></td>
                          <td><?php echo $value['subject'] ?></td>
                          <td><button type="button" class="btn btn-warning" id="show-<?= $i; ?>" value="<?php echo $value['id'] ?>">Show</button></td>
                          <?php 
                        $i++;  
                        }?>


                      </tbody>
                      <tfoot>
                        <tr>
                          <th>Email</th>
                          <th>Name</th>
                          <th>Subject</th>
                          <th>Message</th>
                        </tr>
                      </tfoot>
                    </table>

В этом коде будет переменная "$ i", которая в начале имеет значение 0 и просто добавляется к идентификатору "show-". Последний шаг foreach-l oop, этот 0 просто подсчитывается на единицу. Это сгенерирует и id в формате «show-0», «show-1» (вы могли бы установить $ i в 1 в начале, чтобы он начинал считать с 1). В jQuery вы можете использовать «старт с» -селектором, чтобы выбрать все кнопки и установить для них событие onclick. (только один пример) https://api.jquery.com/attribute-starts-with-selector/

<script>
$( "button[id^='show-']" ).on('click', clickhandler);
</script>

Таким образом, для каждой кнопки с идентификатором, начинающимся с «show-», вы можете заставить ее выполнить действие «clickhandler».