代码1
<html>
<head>
<title>usually function</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<body>
<table border="1px" id="targetTable">
<tr border="1px">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>备注</td>
</tr>
<tr id="model" style="display:none" border="1px">
<td></td>
<td><input type="text" name="username"></td>
<td><input type="text" name="age"></td>
<td><input type="text" name="birthday"></td>
<td><input type="text" name="note"><span onclick="del(this)">删除</span></td>
</tr>
</table>
<br>
<br>
用户输入表单:
姓名<input type="text" name="u_username"><br>
年龄<input type="text" name="u_age"><br>
生日<input type="text" name="u_birthday"><br>
备注<input type="text" name="u_note"><br>
<button onclick="add()" style="font-size:12px">添加</button>
</body>
<html>
<script>
function del(obj){
//alert($(obj).closest("tr").attr("outerHTML"));
//$(obj).closest("tr").attr("outerHTML","")
$(obj).closest("tr").remove();
resetSequenceNum();
}
function add(){
//获取表单的值
var u_username = $("input[name='u_username']").val();
var u_age = $("input[name='u_age']").val();
var u_birthday = $("input[name='u_birthday']").val();
var u_note = $("input[name='u_note']").val();
//alert(u_username);
//判断表单的值是否为空
if(u_username=="" || u_username==undefined){
alert("用户姓名不能为空");
$("input[name='u_username']").focus();
return false;
}
//缓存要赋值的内容,避免多次查询,提高效率
var trstr = $("#model").attr("outerHTML");
//alert(trstr);
//复制最后一行的代码添加到表的最后一行
$("#targetTable tr").last().after(trstr);
//$("#targetTable").find("tr").last().after(trstr);
//让最后一行显示出来,而不是隐藏
//$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题,在ff中显示不正常
$("#targetTable tr").last().css("display","");
//赋值
var target = $("#targetTable tr").last().find("td");
target.find("input[name='username']").val(u_username);
target.find("input[name='age']").val(u_age);
target.find("input[name='birthday']").val(u_birthday);
target.find("input[name='note']").val(u_note);
resetValue();
resetSequenceNum();
}
//清空表单的值
function resetValue(){
$("input[name='u_username']").val("");
$("input[name='u_age']").val("");
$("input[name='u_birthday']").val("");
$("input[name='u_note']").val("");
}
//重新设置序号
function resetSequenceNum(){
var num=0;
$("#targetTable tr").each(function(index,dom){
if(index!=0){
$(dom).find("td").first().html(num);
num++;
}
});
}
</script>
代码2
<table cellpadding="0" cellspacing="0" id="myTable">
<tr>
<th>车型</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr>
<td><input type="text" value="" maxlength="255" placeholder="" title="车型" style="width:98%;"/></td>
<td><input type="text" value="" maxlength="255" placeholder="" title="数量" style="width:98%;"/></td>
<td><input type="hidden" id="reC" value="1" />
<a class="btn btn-mini btn-info" onclick="addRows();">增加行</a>
<a class="btn btn-mini btn-danger" onclick="saveTableValue();">表格数据</a>
</td>
</tr>
</table>
<script>
function addRows() {
//记录总共添加几行
document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;//获取中的行数
//添加一行
var i = parseInt(myTable.rows.length);
var newTr = myTable.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type="text" id="dpDate' + i + '_dpDate' + i + '" style="width:98%;" title="车型" value="" />';
newTd1.innerHTML = '<input type="text" id="txtR' + i + '_1" style="width:98%;" title="数量" value=""/>';
newTd2.innerHTML = '<input type="submit" class="btn btn-mini btn-warning" value="删除该行" onclick="deleRow()" id="btnDele' + i + '" />';
// saveTableValue();//保存值
return false;
}
//删除一行
function deleRow() {
//获得行索引
//两个parentElement分别是TD和TR,rowIndex是TR的属性
var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;
alert("点击了第"+cGetRow);
myTable.deleteRow(cGetRow);
// saveTableValue();//保存值
return false;
}
//保存表格中最新的值
function saveTableValue() {
var myTable = document.getElementById("myTable");
// alert("表格总行数="+ parseInt(myTable.rows.length));
tableValue="";
for (var i=1;i<myTable.rows.length;i++){
var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;//车辆类型
var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;//派车数量
var rowValue=value1+"_"+value2; //"_"来连接
tableValue=tableValue+rowValue+"+";
}
alert("表格内拼接的值"+tableValue);
$("#USECATTYPENUM").val(tableValue);//把表格的值付给input
</script>