JavaEE面试题遇到的js问题-博客-最代码

若余相思 2019-01-05 23:14:34

JavaEE面试题遇到的js问题

最近遇到的面试的一道问题，我回来的时候总结了一下：

题目：将表格的奇数行中的每一列的值，以警告框的方式弹出来

html代码：

<!DOCTYPE html>
<html>
<head>
	<title>题目</title>
</head>
<body>

<table border="2" align="center" width="30%">
		<tr>
			<td>A1</td><td>A2</td><td>A3</td>
		</tr>
		<tr>
			<td>B1</td><td>B2</td><td>B3</td>
		</tr>
		<tr>
			<td>C1</td><td>C2</td><td>C3</td>
		</tr>
		<tr>
			<td>D1</td><td>D2</td><td>D3</td>
		</tr>
		<tr>
			<td colspan="3" align="center">
				<input type="button" value="测试" onclick="myclick()" />
			</td>
		</tr>
	</table>

</body>
</html>

面试的时候，我是这样写的（请不要笑我！）



// 遍历奇数行的每一列的值
  	  	/* function myclick(){
  	  		// 获取行的数量c
  	  		var size = $("table tr").size() - 1;
  	  		// 获得偶数行的jquery对象，根据html代码，这里有两行，所有是个数组
  	  		var $evenTr = $("table tr:lt("+ size+"):even") ;
  	  		// 遍历行
  	  		$evenTr.each(function(){
  	  			// 每行中找到td，td又是个数组，又遍历td，得到td的文本，当然可以用children()替换find("td")
				$(this).find("td").each(function(){
					alert($(this).text()) ;
				})			
  	  		});
	 	} */

我回来仔细看了下，我的代码好好笑，为什么这么简单的问题搞得那么复杂

我回来，改进了下，如下

// 遍历奇数行的每一列的值，改进方法
	 	/* function myclick(){
	 		// 获取偶数行的所有列
	 		var $td = $("table tr:NOT(:last):even td") ;
	 		// 遍历这个列数组就可以了
	 		$td.each(function(){
	 			// 弹出每一列的值
	 			alert($(this).text()) ;
	 		})
	 	} */

最后附上，用jquery遍历表每一行每一列的值的js

//遍历每一行每一列的值
	 	function myclick(){
	 		// 获取行数
	 		var trSize = $("table tr:NOT(:last)").size() ;
	 		
	 		for(var i = 0; i < trSize; i++){
	 			// 获取每一行的列数组
	 			var $td = $("table tr:eq("+ i +") td") ;
	 			// 遍历列数组
	 			$td.each(function(){
	 				// 弹出每一列的值
	 				alert( $(this).text() ) ;
	 			});
	 		}
	 	}

附上整个代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  	 <script type="text/javascript">
  	 
  	 	// 遍历奇数行的每一列的值
  	  	/* function myclick(){
  	  		// 获取行的数量c
  	  		var size = $("table tr").size() - 1;
  	  		// 获得偶数行的jquery对象，根据html代码，这里有两行，所有是个数组
  	  		var $evenTr = $("table tr:lt("+ size+"):even") ;
  	  		// 遍历行
  	  		$evenTr.each(function(){
  	  			// 每行中找到td，td又是个数组，又遍历td，得到td的文本，当然可以用children()替换find("td")
				$(this).find("td").each(function(){
					alert($(this).text()) ;
				})			
  	  		});
	 	} */
	 	
	 	// 遍历奇数行的每一列的值，改进方法
	 	/* function myclick(){
	 		// 获取偶数行的所有列
	 		var $td = $("table tr:NOT(:last):even td") ;
	 		// 遍历这个列数组就可以了
	 		$td.each(function(){
	 			// 弹出每一列的值
	 			alert($(this).text()) ;
	 		})
	 	} */
	 	
	 	//遍历每一行每一列的值
	 	function myclick(){
	 		// 获取行数
	 		var trSize = $("table tr:NOT(:last)").size() ;
	 		
	 		for(var i = 0; i < trSize; i++){
	 			// 获取每一行的列数组
	 			var $td = $("table tr:eq("+ i +") td") ;
	 			// 遍历列数组
	 			$td.each(function(){
	 				// 弹出每一列的值
	 				alert( $(this).text() ) ;
	 			});
	 		}
	 	} 
	 	
  	 </script>
  </head>
  <body>
	<table border="2" align="center" width="30%">
		<tr>
			<td>A1</td><td>A2</td><td>A3</td>
		</tr>
		<tr>
			<td>B1</td><td>B2</td><td>B3</td>
		</tr>
		<tr>
			<td>C1</td><td>C2</td><td>C3</td>
		</tr>
		<tr>
			<td>D1</td><td>D2</td><td>D3</td>
		</tr>
		<tr>
			<td colspan="3" align="center">
				<input type="button" value="测试" onclick="myclick()" />
			</td>
		</tr>
	</table>
  </body>
</html>

总结，面试的时候，往往很简单的题目，自己却搞得很复杂，我认为是因为紧张 + 场景（我写的时候CTO就在我旁边看着我写），然后就是知识不够牢固，还是要多做多练。

如果大佬们对上面的题目，还有什么改进的方法，可以尽管提出来，谢谢啦！

打赏

0个评论