如何使用HTML和JS在foreach循环中为单个按钮创建动态ID

时间:2019-02-28 06:30:59

标签: javascript codeigniter

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

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

  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>

3 个答案:

答案 0 :(得分:0)

尝试使用此代码即可...

<?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>

答案 1 :(得分:0)

您可以编辑按钮onclick以直接更改标签,如下所示:

<?php foreach($tables as $row){ ?>
    <button type = "Submit"
      onclick = "document.getElementById('lblTableNo').innerHTML = this.value;"
      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 } ?>

答案 2 :(得分:0)

您可以像对表数据标签之一进行<tr class="tr"><td class="transactionCodeData"><?php echo $transaction['transactionKey']; ?></td>一样执行此操作。然后在您的javascript查询上

<script type="text/javascript">
        $(document).ready(function(){
            $(".approve").click(function(){
                var $row = $(this).closest('tr'); //for the row
                var $transactionCode = $row.find(".transactionCodeData").text();

                //try if the js script works
                alert($transactionCode);

                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>controller/method",
                    data: { transactionKey: $transactionCode },
                    success: function(data){
                        location.reload(); 
                    }
                });
            });
        });
    </script>