带有类异常的克隆表行

Question

Using JS to clone a table row. The form elements are appended with a numeral as they are duplicated. I have that working fine.

My problem is I want to clear the values of most of the fields but those with a certain class I can't have the value cleared.

html

<div class="add_rec_container" id="fuel_stop" style="display:none;"><!--open #fuel_stop-->
    <p class="label">Enter Fuel Stop:</p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">
      <tbody>
        <tr>
          <td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">
            <option value="AZ">AZ</option>
            <option value="CA" selected="selected">CA</option>
            <option value="NM">NM</option>
            <option value="NV">NV</option>
            <option value="OR">OR</option>
            <option value="UT">UT</option>
            </select>
            </td>
          <td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="total_gal_field" title="Gallons" placeholder="Gallons"/></td>
          <td><input type="checkbox" name="data_yard1" id="data_yard1" class="yard_check" value="y" onclick="disablePPG(this);"/> Yard
          </td>
          <td>$ <input type="tel" name="data_price1" id="data_price1" class="price_field" title="PPG" placeholder="PPG" /></td>
          </tr>
        </tbody>
    </table>
    <a id="add_fuel_row" class="add_btn">+ State</a>
    </div><!--close #fuel_stop-->

  <input type="submit" name="Submit" class="send_button" value="Send"/>
</form>​
</div><!--close .record_entry_container-->

js

<!-- Inset Table Row --Fuel -->
$(document).ready(function($)
{
  // trigger event when button is clicked
  $("a#add_fuel_row").click(function()
  {
    // add new row to table using addTableRow function
    addTableRow($("table#fuel_stop_table"));

    // prevent redirecting
    return false;
  });

  // function to add a new row to a table by cloning the last row
  function addTableRow(table)
  {
    // clone the last row in the table
    var $tr = $(table).find("tbody tr:last").clone();

    // get the name attribute for input and select fields
    $tr.find("select, input").val('').attr("name", function()
    {
      // break the field name and it's number into two parts
      var parts = this.id.match(/(\D+)(\d+)$/);

      // create a unique name (+1 scheme for now)
      return parts[1] + ++parts[2];
    // repeat for id attributes
    }).attr("id", function()
    {
      var parts = this.id.match(/(\D+)(\d+)$/);
      return parts[1] + ++parts[2];
    });

    // append the new row to the table
    $(table).find("tbody tr:last").after($tr);
  };
});

If the input has a class of "yard_check" then I don't want to clear the value. ie the check box needs to stay as value=y.

Thanks.

Answer 1

For inputs/textareas, just use .val('') to clear the values of any given elements in a selector.

$('selectorhere').val('');

For options, use

$('select:first').attr('selected','selected');

For checkboxes, do the same except remove the checked property using .removeProp