请教各位JS大佬，如何实现我点击很多td中的某一个，使得这个td的值显示到input中

人工智能领域优质创作者

博客专家认证

2019-06-14 04:23:55

<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<html>

<head>

<title>Search Page</title>

<style type="text/css">

.search {

	width: 300px;

	height: 40px;

	border-radius: 18px;

	outline: none;

	border: 1px solid #FFFFF;

	padding-left: 20px;

}



#mydiv {

	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: -200px;

	margin-top: -50px;

}



.mouseOver {

	background: #F2F2F2;

	cursor: pointer;

}



.mouseOut {

	color: #000000;

	cursor: pointer;

}



#content_table_body {

	border-radius: 18px;

	outline: none;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

</head>

<body>

	<div id="mydiv">

		<input type="text" size="50" class="search" id="keyword"

			onkeyup="getMoreContents()" onblur="keywordBlur()"

			onfocus="getMoreContents()" />



		<%--内容展示区域--%>

		<div id="popdiv">

			<table id="content_table" bgcolor="#FFFAFA" border="0"

				cellspacing="0" cellpadding="0">

				<tbody id="content_table_body">

					<%--动态查询出来的数据,显示在此--%>

				</tbody>

			</table>

		</div>

	</div>

	<script type="text/javascript">

		var xmlHttp;

		function getMoreContents() {

			clearContent();

			var content = document.getElementById("keyword").value;

			if (content == "") {

				clearContent();

				return;

			}

			xmlHttp = creatXMLHttp();

			var url = "SearchServlet?keyword=" + content;

			url = encodeURI(url);

			url = encodeURI(url);

			xmlHttp.open("POST", url, true);

			xmlHttp.onreadystatechange = callback;

			xmlHttp.send(null);



		}

		//获取XmlHttp对象

		function creatXMLHttp() {

			var xmlHttp;

			if (window.XMLHttpRequest)

				xmlHttp = new XMLHttpRequest();

			if (window.ActiveXObject) {

				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

				if (!xmlHttp)

					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

			}

			return xmlHttp;

		}



		//回调函数

		function callback() {

			if (xmlHttp.readyState == 4)

				if (xmlHttp.status == 200) {

					var result = xmlHttp.responseText;

					var json = eval("(" + result + ")");

					setContent(json);

				}

		}



		//设置关联数据展示

		function setContent(contents) {

			clearContent();

			setLocation();

			//获取关联数据的长度,以此来确定生成的<tr>

			var size = contents.length;

			//设置内容

			for ( var i = 0; i < size; i++) {

				var nextNode = contents[i];

				var tr = document.createElement("tr");

				var td = document.createElement("td");

				td.setAttribute("border", "0");

				td.setAttribute("bgcolor", "white");

				//td.setAttribute("id", "result" + i);

				//td.setAttribute("onclick", "tdClick(this)")

				td.onmouseover = function() {

					this.className = 'mouseOver';

					var t = document.getElementById("keyword");

					//alert(this.td);

					//var result = document.getElementById("result0").innerText;

					//t.value = result;

				};

				td.onmouseout = function() {

					this.className = 'mouseOut';

					

				};

				td.click = function() {

					

				};

				var text = document.createTextNode(nextNode);

				td.appendChild(text);

				tr.appendChild(td);

				document.getElementById("content_table_body").appendChild(tr);

			}



		}

		//清空数据

		function clearContent() {

			var contentTableBody = document

					.getElementById("content_table_body");

			var size = contentTableBody.childNodes.length;

			for ( var i = size - 1; i >= 0; i--)

				contentTableBody.removeChild(contentTableBody.childNodes[i]);

			document.getElementById("popdiv").style.border = "none";

		}



		// 输入框失去焦点 清空

		function keywordBlur() {

			clearContent();

		}

		// 设置关联信息

		function setLocation() {

			// 关联信息的显示位置

			var content = document.getElementById("keyword");

			var width = content.offsetWidth;// 输入框的宽度

			var left = content["offsetLeft"];// 距离左边框的距离

			var top = content["offsetTop"] + content.offsetHeight;// 距离顶部

			// 获取显示数据div

			var popdiv = document.getElementById("popdiv");

			popdiv.style.border = "black 1px solid";

			popdiv.style.left = left + "px";

			popdiv.style.top = top + "px";

			popdiv.style.width = width + "px";

			document.getElementById("content_table").style.width = width + "px";

		}

		

		/*function tdClick(elem){           

            alert(elem)

        }*/

	</script>

</body>

</html>

...全文

531 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

数学家是我理想 2019-06-14

打赏
举报

引用 8 楼天际的海浪的回复:

点击td之前会先触发输入框失去焦点事件清空表格，点击也就无法完成了。应该延时清空表格
		// 输入框失去焦点 清空
		function keywordBlur() {
			setTimeout(function(){
				clearContent();
			}, 500);
		}

用您的方法成功了，蟹蟹

horizon_zpy 2019-06-14

打赏
举报

<html>
<head>
<title>Search Page</title>
<style type="text/css">
.search {
	width: 300px;
	height: 40px;
	border-radius: 18px;
	outline: none;
	border: 1px solid #FFFFF;
	padding-left: 20px;
}

#mydiv {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -50px;
}

.mouseOver {
	background: #F2F2F2;
	cursor: pointer;
}

.mouseOut {
	color: #000000;
	cursor: pointer;
}

#content_table_body {
	border-radius: 18px;
	outline: none;
}
</style>

</head>
<body>
	<div id="mydiv">
		<input type="text" size="50" class="search" id="keyword"
			onkeyup="getMoreContents()" onblur="keywordBlur()"
			onfocus="getMoreContents()" />

		
		<div id="popdiv">
			<table id="content_table" bgcolor="#FFFAFA" border="0"
				cellspacing="0" cellpadding="0">
				<tbody id="content_table_body">
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		var xmlHttp;
		function getMoreContents() {
			clearContent();
			var content = document.getElementById("keyword").value;
			if (content == "") {
				clearContent();
				return;
			}

//var json = eval("(" + result + ")");
    json=["one","too","three"];
					setContent(json);
/*
			xmlHttp = creatXMLHttp();
			var url = "SearchServlet?keyword=" + content;
			url = encodeURI(url);
			url = encodeURI(url);
			xmlHttp.open("POST", url, true);
			xmlHttp.onreadystatechange = callback;
			xmlHttp.send(null);
*/
		}
		//获取XmlHttp对象
		function creatXMLHttp() {
			var xmlHttp;
			if (window.XMLHttpRequest)
				xmlHttp = new XMLHttpRequest();
			if (window.ActiveXObject) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				if (!xmlHttp)
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			return xmlHttp;
		}

		//回调函数
		function callback() {
			if (xmlHttp.readyState == 4)
				if (xmlHttp.status == 200) {
					var result = xmlHttp.responseText;
					var json = eval("(" + result + ")");
					setContent(json);
				}
		}

		//设置关联数据展示
		function setContent(contents) {
			clearContent();
			setLocation();
			//获取关联数据的长度,以此来确定生成的<tr>
			var size = contents.length;
			//设置内容
			for ( var i = 0; i < size; i++) {
				var nextNode = contents[i];
				var tr = document.createElement("tr");
				var td = document.createElement("td");
				td.setAttribute("border", "0");
				td.setAttribute("bgcolor", "white");
				//td.setAttribute("id", "result" + i);
				//td.setAttribute("onclick", "tdClick(this)")
/*
				td.onmouseover = function() {
					this.className = 'mouseOver';
					var t = document.getElementById("keyword");
					alert(this.td);
				};
				td.onmouseout = function() {
					this.className = 'mouseOut';
					
				};
*/
				td.onclick = function() {
					alert(this.innerText);
var text=this.innerText;
document.getElementById("keyword").value=text;
				};

				var text = document.createTextNode(nextNode);
				td.appendChild(text);
				tr.appendChild(td);
				document.getElementById("content_table_body").appendChild(tr);
			}

		}
		//清空数据
		function clearContent() {
			var contentTableBody = document
					.getElementById("content_table_body");
			var size = contentTableBody.childNodes.length;
			for ( var i = size - 1; i >= 0; i--)
				contentTableBody.removeChild(contentTableBody.childNodes[i]);
			document.getElementById("popdiv").style.border = "none";
		}

		// 输入框失去焦点 清空
		function keywordBlur() {
			//clearContent();
		}
		// 设置关联信息
		function setLocation() {
			// 关联信息的显示位置
			var content = document.getElementById("keyword");
			var width = content.offsetWidth;// 输入框的宽度
			var left = content["offsetLeft"];// 距离左边框的距离
			var top = content["offsetTop"] + content.offsetHeight;// 距离顶部
			// 获取显示数据div
			var popdiv = document.getElementById("popdiv");
			popdiv.style.border = "black 1px solid";
			popdiv.style.left = left + "px";
			popdiv.style.top = top + "px";
			popdiv.style.width = width + "px";
			document.getElementById("content_table").style.width = width + "px";
		}
		
		/*function tdClick(elem){           
            alert(elem)
        }*/
	</script>
</body>
</html>

有2个地方，一个是失去焦点，clearcontent,还有，要 var text=this.innerText

数学家是我理想 2019-06-14

打赏
举报

谢谢，我晚上回去试试

数学家是我理想 2019-06-14

打赏
举报

先谢谢啦，晚上我回去试试

天际的海浪 2019-06-14

打赏
举报

点击td之前会先触发输入框失去焦点事件清空表格，点击也就无法完成了。应该延时清空表格



		// 输入框失去焦点 清空
		function keywordBlur() {
			setTimeout(function(){
				clearContent();
			}, 500);
		}

讨厌走开啦 2019-06-14

打赏
举报

引用 4 楼数学家是我理想的回复:

[quote=引用 3 楼讨厌走开啦的回复:] this.innerText打印出来看看是不是没取到值。

是的，我alert了，但是没有弹窗

[/quote] onmouseout的时候元素已经被隐藏了，导致onclick没有成功触发。元素的隐藏在onclick里做应该就没问题了。

数学家是我理想 2019-06-14

打赏
举报

引用 5 楼天际的海浪的回复:

onclick事件没有触发？应该不会啊。

是的，我调试了一下，确实没有触发

天际的海浪 2019-06-14

打赏
举报

onclick事件没有触发？应该不会啊。

数学家是我理想 2019-06-14

打赏
举报

引用 3 楼讨厌走开啦的回复:

this.innerText打印出来看看是不是没取到值。

是的，我alert了，但是没有弹窗

讨厌走开啦 2019-06-14

打赏
举报

this.innerText打印出来看看是不是没取到值。

数学家是我理想 2019-06-14

打赏
举报

引用 1 楼天际的海浪的回复:

for ( var i = 0; i < size; i++) { var nextNode = contents[i]; var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("border", "0"); td.setAttribute("bgcolor", "white"); //td.setAttribute("id", "result" + i); //td.setAttribute("onclick", "tdClick(this)") td.onmouseover = function() { this.className = 'mouseOver'; var t = document.getElementById("keyword"); //alert(this.td); //var result = document.getElementById("result0").innerText; //t.value = result; }; td.onmouseout = function() { this.className = 'mouseOut'; }; td.onclick = function() { document.getElementById("keyword").value = this.innerText; }; var text = document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); }

您好，我试了下，好像还是不行，请看我上面的gif

天际的海浪 2019-06-14

打赏
举报

for ( var i = 0; i < size; i++) { var nextNode = contents[i]; var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("border", "0"); td.setAttribute("bgcolor", "white"); //td.setAttribute("id", "result" + i); //td.setAttribute("onclick", "tdClick(this)") td.onmouseover = function() { this.className = 'mouseOver'; var t = document.getElementById("keyword"); //alert(this.td); //var result = document.getElementById("result0").innerText; //t.value = result; }; td.onmouseout = function() { this.className = 'mouseOut'; }; td.onclick = function() { document.getElementById("keyword").value = this.innerText; }; var text = document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); }