jQuery가 포함 된 동적 HTML 테이블

Question

사용자가 동적으로 행을 추가 할 수있는 테이블이 있습니다. 필드 중 하나 인 내 날짜 필드는 추가 된 모든 행에 대해 동일해야합니다. 나는 모든 추가 행에 날짜 필드 복제본을 만들었고 해당 필드를 만든 행에 읽기 전용으로 만들었지 만 사용자가 처음으로 돌아 가면 몇 가지 코드를 추가 할 수있는 방법이 있는지 궁금합니다. 행을 선택하고 영수증 날짜를 변경하면 사용자가 추가 한 모든 행도 새 날짜로 업데이트됩니다.

<table border="0" width="825px" cellspacing="0" cellpadding="5" name="receipts" id = "receipts"> 
<thead> 
    <tr> 
     <th class="colheader" width="125px">Receipt #</th> 
     <th class="colheader" width="120px">Date</th> 
     <th class="colheader" width="120px">Category</th> 
     <th class="colheader" width="120px">Description</th> 
     <th class="colheader" width="120px">Amount</th> 
     <th class="colheader" width="145px"><span class="boldblacklinks"><a href="#" id="add">[Add +]</a></span></th> 
    </tr> 
</thead> 
    <tbody class="lineBdy"> 
     <tr id="line_1" class="spacer"> 
      <td><input type="text" class="receipt fieldclasssm" id="recLineReceipt[]" name="recLineReceipt[]" size="7" value = "<?=$receiptNumber?>"/></td> 
      <td><input type="text" class="date fieldclasssm" id="recLineDate[]" name="recLineDate[]" size="10" value = "<?=date("m/d/Y", strtotime($today))?>"/></td> 
      <td><select name="selectCategory[]" class="fieldclasssm"> 
         <option value = "">Select a Category...</option> 
         <?php //Get Categories 

         $getCats = mysql_query("SELECT id, nominalName FROM expense_nominalCodes ORDER BY id") or die("Get Cats: " . mysql_error()); 

         if(mysql_num_rows($getCats) > 0) 
          { 
          while($catData = mysql_fetch_array($getCats)) 
           { 
           echo '<option value = "'.$catData['id'].'">'.$catData['nominalName'] . '</option>'; 
           } 
          } 
         ?> 
       </select> 
      </td> 
      <td><input type="text" class="lineDescr fieldclasssm" name="recLineDescr[]" id="recLineDescr[]" value = "<?=$_POST['recLineDescr']?>" size="40" /></td> 
      <td colspan = "2"><input type="text" class="amt fieldclasssm" name="recLineAmount[]" id="recLineAmount[]" value = "<?=$_POST['recLineAmount']?>" size="12" /></td> 
     </tr> 
    </tbody> 
</table> 
<div align="center"><br /><br /><input type="submit" name = "saveAdd" class="btn" value = "Save & Add Another Receipt" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name = "saveAdd" class="btn" value = "Save as Draft" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" class="btn"name="saveDraft" value = "Save & Finalize Expense Report" /><br /><br /></div> 

<script type="text/javascript"> 

//Add new table row & clone date field 
$('#add').on('click', function(){ 
    addReceiptItem(); 
    $('.date').focus(function() { 
     $(this).select(); 
    }); 
    $('.receipt').focus(function() { 
     $(this).select(); 
    }); 
}); 

function addReceiptItem(){ 
    var lastID = $('tr[id*="line_"]').length,  
     newTds = $('tr[id="line_' + lastID + '"] td').clone(), 
     newRow = document.createElement('tr'); 

    // add new id and class to row, append cloned tds 
    $(newRow) 
     .attr('id', 'line_' + (lastID + 1)) 
     .attr('class', 'spacer') 
     .append(newTds); 

    //empty out the fields, except the one you want to keep populated 
    // $(newRow).find('input').not(':eq(0)').val(''); 

    // $(newRow).find('input').not(':eq(0)').val(''); 


    $(newRow).find('input').not(':eq(0)').not(':eq(0)').val(''); 
    $(newRow).find('class').not(':eq(0)').not(':eq(0)').val(''); 

    //add the new row to the table body 
    $('tbody.lineBdy').append(newRow); 
    $('.receipt').attr('readonly', true); 
    $('.date').attr('readonly', true); 
    }; 

Answer 1

해당 필드 모두가 date 클래스가있는 경우 당신이 뭔가 같은

$('#someUpdateButton').click(function(){ 
    $('.date').val($('.date:nth-of-type(1)').val()) 
}); 

A working fiddle