时间戳

首页 > 解决方案 > 如何使用 html 和 js 在 foreach 循环中为单个按钮创建动态 ID

javascript - 如何使用 html 和 js 在 foreach 循环中为单个按钮创建动态 ID

问题描述

我要为 for 循环下的单个按钮生成不同的 ID。我创建了表tbl_tableMaster (id , tblNo )

我创建了一个视图，tblno通过使用 foreach 循环在按钮上显示，但是，我要做的是：

  1. 为按钮生成不同的 id
  2. onClick任何按钮（btnclick）的值应显示在标签上（lblTableNo）
<?php foreach($tables as $row){ ?>
    <button type = "Submit"
      onclick = "changeLabel()"
      id = "btnclick"
      class = "btn btn-primary mt-1"
      value = "<?php echo $row->table_name;?>" > <?php echo $row->table_name;?> </button>
    <input type = "text"
      name = "txtID"
      id = "txtID<?php echo $row->table_id;?>"
      value = "<?php echo $row->table_id;?>"
      hidden >
<?php } ?>

<div class="card-header ">
  <strong>Table No :</strong> <label id="lblTableNo"></label>
</div>

标签： javascriptcodeigniter

解决方案

试试这个代码，它可以工作......

<?php $no=1;  foreach($tables as $row){ ?>
        <button type = "Submit"
          onclick = "changeLabel(<?php echo $no; ?>)"
          id = "btnclick<?php echo $no; ?>"
          class = "btn btn-primary mt-1"
          value = "<?php echo $row->table_name;?>" > <?php echo $row->table_name;?> </button>
        <input type = "text"
          name = "txtID"
          id = "txtID<?php echo $row->table_id;?>"
          value = "<?php echo $row->table_id;?>"
          hidden >
    <?php $no++; } ?>

    <script type="text/javascript">


        function changeLabel(id) {

         var loanamount = document.getElementById('btnclick' + id).value;

          document.getElementById('lblTableNo').innerHTML = loanamount;

        };
        </script>

    <div class="card-header ">
      <strong>Table No :</strong> <label id="lblTableNo"></label>
    </div>

推荐阅读