js动态增加、删除行

最新推荐文章于 2021-06-28 15:26:12 发布

justdoit1024

最新推荐文章于 2021-06-28 15:26:12 发布

阅读量91

点赞数

分类专栏： web前端文章标签： Safari Firefox Opera HTML

本文链接：https://blog.csdn.net/shiyong2008/article/details/83526294

版权

web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MyHtml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
    	function rowindex(tr)
			{
				var Browser = new Object();

				Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument != 'undefined');
				Browser.isIE = window.ActiveXObject ? true : false;
				Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != - 1);
				Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != - 1);
				Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != - 1);
			  if (Browser.isIE)
			  {
			    return tr.rowIndex;
			  }
			  else
			  {
			    table = tr.parentNode.parentNode;
			    for (i = 0; i < table.rows.length; i ++ )
			    {
			      if (table.rows[i] == tr)
			      {
			        return i;
			      }
			    }
			  }
			}

			/**
			 * 新增一个价格阶梯
			 */
			function addLadder(obj)
			{

			  var src  = obj.parentNode.parentNode;

			  var idx  = rowindex(src);
			  var tbl  = document.getElementById("groupTable");
			  var row  = tbl.insertRow(idx + 1);
			  var cell = row.insertCell(-1);
			  cell.innerHTML = '';
			  var cell = row.insertCell(-1);
			  cell.innerHTML = src.cells[1].innerHTML.replace(/(.*)(addLadder)(.*)(\[)(\+)/i, "$1removeLadder$3$4-");;
			}

			/**
			 * 删除一个价格阶梯
			 */
			function removeLadder(obj)
			{
			  var row = rowindex(obj.parentNode.parentNode);
			  var tbl = document.getElementById('groupTable');

			  tbl.deleteRow(row);
			}
		</script>

	</head>

	<body>
		<table id="groupTable" width="100%" cellpadding="0" cellspacing="0"
			class="list_box" style="background-color: #fff;">
			<tr>
				<td align="right">
					<b>价格阶梯：</b>
				</td>
				<td>
					数量达到
					<input type="text" name="ladder_amount[]" value="0" size="8" />
					   享受价格
					<input type="text" name="ladder_price[]" value="0" size="8" />
					<a href="javascript:;" onclick="addLadder(this)"><strong>[+]</strong>
					</a>
				</td>
			</tr>
		</table>
	</body>
</html>