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