Question

我的表上有空的文本区域（Note1，Note2，Note3，Note4），并输入了文本（订单级别，数量级别）。如何使用onchange方法检测哪个文本区域或输入文本？我有脚本触发onchange，但是它只触发表td的第一行中的警报消息。

例如，如果我在Note1文本区域的第二行添加文本，它将不会发出警报消息。由于表是循环的，如何区分单元格？因为所有note1 textarea使用相同的ID但有多行？

这是我的代码：

<table id="table1" class="table table-bordered"> 
   <thead>
     <tr>
       <th style="display:none;">Stock Code</th>
       <th>Stock Name</th>
       <th>Note 1</th>
       <th>Note 2</th>
       <th>Note 3</th>
       <th>Note 4</th>
       <th>Order Level</th>
       <th>Qty Level</th>
       <th>Balance</th>  
       <th>Purchase Price</th>  
       <th>UOM</th>                    

       @for ($i=0; $i<=12; $i++)
         <th><?php echo date('Y/m', strtotime('-'.$i.' month', strtotime($getDate)));?></th>
       @endfor                                          
    </tr>
  </thead>
  <tbody>
    <!-- Foreach loop from db -->
    @foreach ($query as $val)     
      <tr>                    
        <td style="display:none;">{{ $val->StockCode }}</td>
        <td class="text-nowrap align-middle">{{ $val->StockName }}</td>
        <td><textarea rows="2" cols="10" id="note1" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note2" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note3" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note4" class="align-middle"></textarea></td>
        <td><input type="text" id="orderlevel" class="text-right"></td>
        <td><input type="text" id="qtylevel" class="text-right"></td>
        <td class="text-right align-middle">{{ number_format($val->CurrentBalance, 2) }}</td>
        <td class="text-right align-middle">{{ number_format($val->PurchasePrice, 2) }}</td>
        <td class="text-center align-middle">{{ $val->BaseUOM }}</td>

        @for ($i=1; $i<=13; $i++)
          <?php 
            //looping variables
            $Qty = 'Qty'.$i;
            $Date = 'Date'.$i;
          ?>
           <td class="text-right align-middle">                                    
             @if($val->$Qty > 0) 
             <a id="viewdetails" data-toggle="modal" 
                data-productid="{{$val->Id}}"
                data-productname="{{$val->StockName}}"
                data-getdate="{{date('Y-m', strtotime($val->$Date))}}"
                                    href="#" data-target="#dataModal">{{ number_format($val->$Qty, 2) }}</a>
             @endif
           </td>                                                 
         @endfor 
       </tr> 
       @endforeach  
       <!-- End Foreach loop -->                     
     </tbody>
 </table>

这是我的剧本：

$(document).ready(function(){
  $("#note1").change(function(){                 
    var stockid = document.getElementById("stockid").value;                    
    var stockname = document.getElementById("stockname").value;                    
    var note1 = document.getElementById("note1").value;      

    alert("The text entered is "+note1);
  });
});

Answer 1

<table id="table1" class="table table-bordered"> 
<thead>
 <tr>
   <th style="display:none;">Stock Code</th>
   <th>Stock Name</th>
   <th>Note 1</th>
   <th>Note 2</th>
   <th>Note 3</th>
   <th>Note 4</th>
   <th>Order Level</th>
   <th>Qty Level</th>
   <th>Balance</th>  
   <th>Purchase Price</th>  
   <th>UOM</th>                    

   @for ($i=0; $i<=12; $i++)
     <th><?php echo date('Y/m', strtotime('-'.$i.' month', strtotime($getDate)));?></th>
   @endfor                                          
</tr>
</thead>
<tbody>
    <!-- Foreach loop from db -->
    @foreach ($query as $val)     
  <tr>                    
    <td style="display:none;">{{ $val->StockCode }}</td>
    <td class="text-nowrap align-middle">{{ $val->StockName }}</td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="1_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="2_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="3_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="4_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><input type="text" id="orderlevel" class="text-right"></td>
    <td><input type="text" id="qtylevel" class="text-right"></td>
    <td class="text-right align-middle">{{ number_format($val->CurrentBalance, 2) }}</td>
    <td class="text-right align-middle">{{ number_format($val->PurchasePrice, 2) }}</td>
    <td class="text-center align-middle">{{ $val->BaseUOM }}</td>

    @for ($i=1; $i<=13; $i++)
      <?php 
        //looping variables
        $Qty = 'Qty'.$i;
        $Date = 'Date'.$i;
      ?>
       <td class="text-right align-middle">                                    
         @if($val->$Qty > 0) 
         <a id="viewdetails" data-toggle="modal" 
            data-productid="{{$val->Id}}"
            data-productname="{{$val->StockName}}"
            data-getdate="{{date('Y-m', strtotime($val->$Date))}}"
                                href="#" data-target="#dataModal">{{ number_format($val->$Qty, 2) }}</a>
         @endif
       </td>                                                 
     @endfor 
   </tr> 
   @endforeach  
   <!-- End Foreach loop -->                     
 </tbody>

$(document).ready(function(){
  $(".note").change(function(){  
    var numberAndStockCode = $(this).data("something")
    numberANdStockCode = numberAndStockCode.split('_')
    var stockid = numberAndStockCode[1];                   
    var note1 = document.getElementById("note1").value;      

    alert("Note Number and StockCode" + numberAndStockCode[0] + ' ' + numberAndStockCode[1]);
  });
});

可能存在与php相关的语法错误，但概念是在类上具有click事件，并使用html元素的data属性读取单击了哪个元素。

区分具有相同ID的多个行单元格

1 个答案: