使用 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。
谢谢。