JS表格的操作（增删改查）、图片轮换

最新推荐文章于 2024-04-19 05:41:57 发布

Naraseny

最新推荐文章于 2024-04-19 05:41:57 发布

阅读量1.2k

点赞数 2

分类专栏： css html JS 文章标签： javascript 前端 safari html css

本文链接：https://blog.csdn.net/qq_62881798/article/details/123362354

版权

JS 同时被 3 个专栏收录

31 篇文章 1 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

1.简单的表格操作：

</style>
<script type="text/javascript">
function addRow(){	
var fRow=document.getElementById("row3");
var newRow=document.createElement("tr")	; //创建行节点
var col1=document.createElement("td");   //创建单元格节点
col1.innerHTML="幸福从天而降";           //为单元格添加文本
var col2=document.createElement("td");
col2.innerHTML="&yen;18.50";
col2.setAttribute("align","center");
newRow.appendChild(col1);              //把单元格添加到行节点中
newRow.appendChild(col2);
document.getElementById("row3").parentNode.insertBefore(newRow,fRow);  //把行节点添加到表格末尾
	}
function updateRow(){
	var uRow=document.getElementById("row1");
	//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
   uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");
	}
function delRow(){
	var dRow=document.getElementById("row2"); //访问被删除的行
	 dRow.parentNode.removeChild(dRow);         //删除行
	}

function copyRow(){
	var oldRow=document.getElementById("row3"); //访问复制的行
	var newRow=oldRow.cloneNode(true);           //复制指定的行及子节点
	document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
	}
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行"  onclick="delRow()"/>
<input name="b3" type="button" value="修改标题样式"  onclick="updateRow()"/>
<input name="b4" type="button" value="复制最后一行"  onclick="copyRow()" />
</body>
</html>

2.能实现增加和删除的订单表：

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>增加和删除订单</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}

			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 400px;
			}

			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
				text-align: center;
			}

			.title {
				font-weight: bold;
				background-color: #cccccc;
			}
		</style>

		<script type="text/javascript">
			function addRow() {
				var addTable = document.getElementById("order");
				var row_index = addTable.rows.length - 1; //新插入行在表格中的位置
				var newRow = addTable.insertRow(row_index); //插入新行
				newRow.id = "row" + row_index; //设置新插入行的ID

				var col1 = newRow.insertCell(0);
				col1.innerHTML = "抗疲劳神奇钛项圈";

				var col2 = newRow.insertCell(1);
				col2.innerHTML = row_index;

				var col3 = newRow.insertCell(2);
				col3.innerHTML = "&yen;49.00";

				var col4 = newRow.insertCell(3);
				col4.innerHTML = "<input name='del" + row_index + "' type='button' value='删除' onclick=\"delRow('row" +
					row_index + "')\" />";
			}

			function delRow(rowId) {
				var row = document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
				document.getElementById("order").deleteRow(row);
			}
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="order">
			<tr class="title">
				<td>商品名称</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr id="del1">
				<td>防滑真皮休闲鞋</td>
				<td>12</td>
				<td>&yen;568.50</td>
				<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' /></td>
			</tr>
			<tr>
				<td colspan="4" style="height:30px;">
					<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
				</td>
			</tr>
		</table>
	</body>
</html>

3.能实现修改：

</style>

<script type="text/javascript">
	function addRow() {
		var addTable = document.getElementById("order");
		var row_index = addTable.rows.length - 1; //新插入行在表格中的位置
		var newRow = addTable.insertRow(row_index); //插入新行
		newRow.id = "row" + row_index; //设置新插入行的ID

		var col1 = newRow.insertCell(0);
		col1.innerHTML = "抗疲劳神奇钛项圈";

		var col2 = newRow.insertCell(1);
		col2.innerHTML = row_index;

		var col3 = newRow.insertCell(2);
		col3.innerHTML = "&yen;49.00";

		var col4 = newRow.insertCell(3);
		col4.innerHTML = "<input name='del" + row_index + "' type='button' value='删除' onclick=\"delRow('row" + row_index +
			"')\" />&nbsp;<input id='edit" + row_index + "' type='button' value='修改' onclick=\"editRow('row" + row_index +
			"')\" />";

	}

	function delRow(rowId) {
		var row = document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
		document.getElementById("order").deleteRow(row);
	}

	function editRow(rowId) {
		var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
		var col = document.getElementById(rowId).cells;
		var text = col[1].innerHTML;
		col[1].innerHTML = "<input name='num" + row + "' style='width:40px;' type='text' value='" + text + "' />";
		col[3].lastChild.value = "确定";
		col[3].lastChild.setAttribute("onclick", "upRow('" + rowId + "')");


		/*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='确定' onclick=\"upRow('"+rowId+ "')\" />"	*/
	}

	function upRow(rowId) {
		var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
		var col = document.getElementById(rowId).cells;
		var text = col[1].firstChild.value;
		col[1].innerHTML = text;


		col[3].lastChild.value = "修改";
		col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");


		/*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='修改' onclick=\"editRow('"+rowId+ "')\" />"*/



	}
</script>
</head>

<body>
	<table border="0" cellspacing="0" cellpadding="0" id="order">
		<tr class="title">
			<td>商品名称</td>
			<td>数量</td>
			<td>价格</td>
			<td>操作</td>
		</tr>
		<tr id="del1">
			<td>防滑真皮休闲鞋</td>
			<td>12</td>
			<td>&yen;568.50</td>
			<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' />
				<input id="edit1" type="button" value="修改" onclick='editRow("del1")' />
			</td>
		</tr>
		<tr>
			<td colspan="4" style="height:30px;">
				<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
			</td>
		</tr>
	</table>
</body>
</html>

4.表格操作的最终代码：

</style>

<script type="text/javascript">
function addRow(){
   var addTable=document.getElementById("order");
   var row_index=addTable.rows.length-1;       //新插入行在表格中的位置
   var newRow=addTable.insertRow(row_index);  //插入新行
   newRow.id="row"+row_index;                 //设置新插入行的ID


   var col1=newRow.insertCell(0);
   col1.innerHTML="<input id='a"+row_index+"' style='width:160px;' type='text' />";

   var col2=newRow.insertCell(1);
   col2.innerHTML="<input id='b"+row_index+"' style='width:30px;' type='text' />";

   var col3=newRow.insertCell(2);
   col3.innerHTML="<input id='c"+row_index+"' style='width:30px;' type='text' />";

   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" />&nbsp;<input id='edit"+row_index+"' type='button' value='确定' onclick=\"upRow('row"+row_index+ "')\" />";

	}

function delRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //删除行所在表格中的位置
	document.getElementById("order").deleteRow(row); 
	}
	
function editRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
	var col=document.getElementById(rowId).cells;
	var texta=col[0].innerHTML;
	col[0].innerHTML="<input name='a"+row+"' style='width:160px;' type='text' value='"+texta+"' />";
	var textb=col[1].innerHTML;
	col[1].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textb+"' />";
	var textc=col[2].innerHTML;
	col[2].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textc+"' />";
	

	col[3].lastChild.value="确定";
	col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");
	
	}	

function upRow(rowId){
	var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
	var col=document.getElementById(rowId).cells;
	var texta=col[0].firstChild.value;
	var textb=col[1].firstChild.value;
	var textc=col[2].firstChild.value;
	col[0].innerHTML=texta;
	col[1].innerHTML=textb;
	col[2].innerHTML=textc;
	

	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");


	}

</script>
</head>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>单价</td>
     <td>操作</td>
  </tr>
  <tr id="row1">
    <td>玫瑰保湿睡眠面膜</td>
    <td>5</td>
    <td>&yen;48</td>
    <td><input name="del" type="button" value="删除" onclick="delRow('row1')" />
     <input name="edit" type="button" value="修改"  onclick="editRow('row1')" /></td>
  </tr>
  <tr>
    <td style="text-align:center; height:30px;" colspan="4">
    <input name="bsn" type="button" value="增加定单" onclick="addRow()" /></td>
  </tr>
</table>

</body>
</html>

5.图片的轮换：

</style>

<script type="text/javascript">
function change(dd){
	var p=document.getElementById("photo");
	p.src="images/"+dd;


	}

</script>
</head>

<body>
<table width="360" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="height:190px;"><div id="apDiv1">
    <a href="javascript:change('1.gif')">1</a>
    <a href="javascript:change('2.gif')">2</a>
    <a href="javascript:change('3.jpg')">3</a>
    <a href="javascript:change('4.jpg')">4</a>
    <a href="javascript:change('5.gif')">5</a>
    </div>
    <img src="images/1.gif" alt="Í¼Æ¬" id="photo"/></td>
  </tr>
  </table>
</body>
</html>

Naraseny

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JS表格的操作（增删改查）、图片轮换

1.简单的表格操作：</style><script type="text/javascript">function addRow(){ var fRow=document.getElementById("row3");var newRow=document.createElement("tr") ; //创建行节点var col1=document.createElement("td"); //创建单元格节点col1.innerHTML="幸福从天而降";
复制链接

扫一扫