克隆表行与类异常

时间:2013-08-05 19:02:15

标签: javascript jquery

使用JS克隆表格行。表单元素在复制时附加数字。我的工作正常。

我的问题是我想要清除大多数字段的值,但是那些具有某个类的字段我不能清除该值。

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);
  };
});

如果输入的类为“yard_check”,那么我不想清除该值。即复选框需要保持为值= y。

感谢。

1 个答案:

答案 0 :(得分:0)

对于input / textareas,只需使用.val('')清除选择器中任何给定元素的值。

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

对于选项,请使用

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

对于复选框,除了使用.removeProp

删除checked属性外,执行相同操作