'Pass table to button with javascript

A table is generated with PHP. The division of the table should be retained as far as possible. The table should be passed as in the example with selectable options.

$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:nth-child(2n)").text($(this).text());
      $(".btn:nth-child(2n)").val($(this).text());

   });

});

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:nth-child(2n)").text($(this).text());
      $(".btn:nth-child(2n)").val($(this).text());
   });

});
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");


li i {display:none}

table {float:left}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
  <button class="btn">Please Select From List</button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a href="#" class="" data-value=1>
      <p><span> Option I</span></p>
      </a> </li>
    <li>
    <li><a href="#" class="" data-value=2>
      <p><span> Option II  <i class="bi bi-info-square-fill"></i></span></p>
      </a> </li>
    <li>
    <li>
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td><strong>Option III</strong></td>
            <td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>
</div>

I have prepared an example how it should look like. So far, however, only text is transferred. If possible, the entire table including images should be displayed.

Option I is the basis for selectable options.

Option II is the current view with icon. That would be an emergency solution if no table can be passed.

Option III is the current representation with the pass table with no selectable option.

other suggestions are welcome

javascripthtmljquery


Solution 1:[1]

instead of the link, the entire table was now passed as an option. now the entire table can be selected as an option.

$(function(){

    $(".dropdown-menu li table").click(function(){

      $(".btn:nth-child(2n)").html($(this).html());
      $(".btn:nth-child(2n)").val($(this).html());

   });

});

 $(function(){

    $(".dropdown-menu").on('click', 'li table', function(){
      $(".btn:nth-child(2n)").html($(this).html());
      $(".btn:nth-child(2n)").val($(this).html());
   });

});

in full it looks like this

$(function(){

    $(".dropdown-menu li table").click(function(){

      $(".btn:nth-child(2n)").html($(this).html());
      $(".btn:nth-child(2n)").val($(this).html());

   });

});

 $(function(){

    $(".dropdown-menu").on('click', 'li table', function(){
      $(".btn:nth-child(2n)").html($(this).html());
      $(".btn:nth-child(2n)").val($(this).html());
   });

});
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");


li i {display:none}

table {float:left}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
  <button class="btn">Please Select From List</button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li>
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td><strong>Option I</strong></td>
            <td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
          </tr>
        </tbody>
      </table>
    </li>
    <li>
    <li>
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td><strong>Option II</strong></td>
            <td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
          </tr>
        </tbody>
      </table>
    </li>
    <li>
    <li>
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td><strong>Option III</strong></td>
            <td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions