js动态添加和删除行

<style>
.field {
	font-family: "MS UI Gothic";
	font-size: 12px;
	height: 17px;
	border: 1px solid #F00000;
	readonly: false;

}
.tableLightLine {
	height: 20;
	background-color: #FFFFFF;
	font-family: "MS UI Gothic";
	font-size: 12px;
	color: #000000;
}
.tableDarkLine {
	height: 20;
	background-color: #F3F3F3;
	font-family: "MS UI Gothic";
	font-size: 12px;
	color: #000000;
}
</style>


<script language="javascript" type="text/javascript">
function onAdd(tblId) {
	var rowLen = tblId.rows.length;
	var addedCount = 0;
	if (rowLen > 0) {
		if (tblId.rows[rowLen -1].all['itemChkedAdded']) {
			addedCount = tblId.rows[rowLen - 1].all['itemChkedAdded'].value;
		}
	}
	if (addedCount == "") {
		addedCount = 0;
	}
	var addCountC = parseInt(addedCount);
	addCountC++;
	var trClassName = "";
	if (tblId.rows.length % 2 == 0) {
		trClassName = "tableLightLine";;
	} else {
		trClassName = "tableDarkLine";
	}
	var rowId = tblId.insertRow();
	rowId.className = trClassName;
	rowId.align = "center";
	rowId.style.Height = "22";
	
	var cellId = rowId.insertCell();
	cellId.width = "25";
	cellId.align = "center";
	var innerHTML1 = "";
	innerHTML1 = innerHTML1 + '<input type="checkbox" name="itemChkedAdded" id="itemChkedAdded" value="' + String(addCountC) + '" />';
	innerHTML1 = innerHTML1 + '<input type="hidden" name="itemCdedAdded" id="itemCdedAdded" value="' + String(addCountC) + '" />';
	cellId.innerHTML = innerHTML1;
	
	var cellId2 = rowId.insertCell();
	cellId2.width = "300";
	cellId2.align = "left";
	var innerHTML2 = "";
	innerHTML2 = '<input type="text" name="itemNameAdded" id="itemNameAdded" class="field" size="27" maxlength="40" style="width:299px;" />';
	cellId2.innerHTML = innerHTML2;
	
	var cellId3 = rowId.insertCell();
	cellId3.width = "125";
	cellId3.align = "right";
	var innerHTML3 = "<input name=\"diaItemPriceAdded\" id=\"diaItemPriceAdded\" " 
			+ "type=\"text\" class=\"field\" style=\"text-align:right;ime-mode:disabled;\" " + "size='22' "
			+ "maxlength=\"11\">";
	cellId3.innerHTML = innerHTML3;
}

function onDelete(tblId, checkBoxAddedId) {
	var checked = false;
	for (var i = 0; i < tblId.rows.length; i++) {
		if (tblId.rows[i].all[checkBoxAddedId].checked) {
			checked = true;
			tblId.deleteRow(i);
			i--;
		}
	}
	var addCount = 0;
	for (var i = 0; i < tblId.rows.length; i++) {
		if (i % 2 == 0) {
			tblId.rows[i].className = "tableLightLine";
		} else {
			tblId.rows[i].className = "tableDarkLine";
		}
		if (tblId.rows[i].all[checkBoxAddedId]) {
			tblId.rows[i].all[checkBoxAddedId].value = String(addCount);
			tblId.rows[i].all['itemCdedAdded'].value = String(addCount);
			addCount++;
		}
	}
	if (!checked) {
		alert("请选择一行");
	}
}
</script>

<input type="button" name="btnAdd" id="btnAdd" value="追加" onclick="onAdd(document.all['testTblId'])" />
<input type="button" name="btnDelete" id="btnDelete" value="删除" onclick="onDelete(document.all['testTblId'], 'itemChkedAdded')" />
<table width="600" border="0" align="left" id="testTblId" style="table-layout: fixed">
</table>