如何在动态输入上使用GetElementsByClassName()
我有一个小问题，我想查询我的数据库，所以当用户使用自动完成时，我可以在另一个名为*Exist Act *的列上获得该产品的库存，现在，当我移出任何文本框时，它会更改所有Exist column.Is的值，这样脚本就可以更改同一行上的值了吗？，这是我的代码，我已经修改了整个脚本，这个。
$(document).on("mouseout",".service",function(){//begin event
var $this=$(this);
var service = $(this).val();
var dataString = 'service='+service;
$.ajax({
type: "GET",
url: "busca.php",
data: dataString,
success: function(data) {
$('.txtHint').html(data);
}
});
});在这个中嵌入了
函数showUser(str) {
if (str == "") {
document.getElementsByClassName("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementsByClassName("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "busca.php?q=" + str, true);
xmlhttp.send();
}}
<form action="levantar_pedido2.php" method="post" name="form1" target="cuerpo">
<table class="table table-bordered table-condensed" align="left">
<tr class="Estilo9">
<td width="20" align="center ">-</td>
<td width="1" align="left"><strong>Cantidad</strong>
</td>
<td width="50" align="left"><strong>Exist Act *</strong>
</td>
<td width="100" align="left"><strong>Descripcion</strong>
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" value="X" name="articulo[]" id="articulo" />
</td>
<td>
<input name="cantidad[]" id="cantidad" type="text" maxlength="5" size="5" value="">
</td>
<td align="center">
<div class="txtHint">*</div>
</td>
<td align="left">
<input onmouseout="showUser(this.value)" type="text" size="50" id="service" class="service" name="service[]" />
<div align="right" class="suggestions"></div>
</td>
</tr>
</table>
<table class="table table-bordered table-condensed" align="center">
<div class="inputs"></div>
</table>
<br>
<A class="btn btn-default" id="adder" href="#">Áñadir otro que no este en la lista</A>
<div align="right">
<button class="btn btn-primary btn-lg" type="submit" name="Submit" value="Levantar pedido"> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Levantar pedido</button>
</div>
</form>
，这是我的js，用于动态输入
function addInput() {
$('.inputs').append(
'<table " class="table table-bordered table-condensed" align="left"><tr>'+
'<td width="20"align="center"><input type="checkbox" value="X" name="articulo[]" id="articulo"/></td> '+
'<td width="74"> <input name="cantidad[]" id="cantidad" type="text" maxlength="5" size="5" value="" > </td>'+
'<td width="50"align="center"><div class="txtHint"> *</div></td>'+
'<td width="100" align="left"><input onmouseout ="showUser(this.value)" type="text" size="50" class="service" name="service[]" /></td><div class="suggestions"></div> ' +
'</tr></table>'
);这个是我尝试使用的循环
function showUser(str){
if (str == "") {
document.getElementsByClassName("txtHint")[0].innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var divs=getElementsByClassName("txtHint");
for(var x=0;x<divs.length;x++){
divs[x].innerHTML = xmlhttp.responseText;
}}
};
xmlhttp.open("GET","busca.php?q="+str,true);
xmlhttp.send();
}}抱歉，我的英语不好
回答 3
Stack Overflow用户
发布于 2016-03-16 02:48:04
好的，现在使用这个新的文本，当我移出任意文本框时，它会更改所有Exist column.Is的值，有一个解决方案，所以脚本只需要更改同一行上的值？
你一切都做对了。唯一的问题是您正在使用以下代码
$('.txtHint').html(data);在ajax成功方法中，它将选择整个表中带有类txtHint的所有元素，然后更改所有元素。您只需要使用类txtHint选择相应的row元素，所以您可以做的是遍历到顶部，找到包装该输入元素的tr，然后在这个tr中找到名为txtHint的元素，然后只更改这个元素。所以使用下面的代码
$this.closest('tr').find('.txtHint').html(data);由于您已经拥有了$this，这将保存触发事件的当前输入元素，然后$this.closest('tr')将为您获取包装输入的父tr，现在跟踪到这个tr中包含类txtHint的元素，然后只更改它。
Stack Overflow用户
发布于 2016-03-15 17:38:25
如果您使用的是JQuery，并且所有元素容器都有.input类，那么使用$(".input").html()访问元素的html。现在，如果您需要在动态创建的元素上使用一个事件，那么情况就不同了。首先，您必须选择页面首次加载时已经存在的文档或元素，以便在动态创建的元素上触发事件。见下面的例子：
动态创建的示例
<!--pretend this was added using the JQuery append() function-->
<div class="input">I was added dynamically</div>JQuery事件：
//select the document for example first then the selector
$(document).on("mouseover",".input",function(){//begin event
//do something when the event is fired
//alert the html of element hovered over with an input class
alert($(this).html());
});//end event更新：
在鼠标离开.service类元素后，下面的代码将只更改一行中的td元素。用以下代码替换ajax成功函数中的$('.txtHint').html(data);：
/* Select the parent element which is a
td element and then select the previous
td element which contains the txtHint class
*/
$(this).parent().prev("td").html(data);Stack Overflow用户
发布于 2016-03-15 18:09:00
首先，我想看看选择器在jQuery中是如何工作的。除非有必要，否则我只能使用一种选择元素的形式(即jQuery或document.getElementBy.)。
jQuery的基本选择器是：
$("tagName")与document.GetElementsByTagName等价
$(".className")与document.GetElementsByClassName等价
$("#id")与document.GetElementById等价
您应该注意到，前两个返回多个项，而最后一个只返回一个元素(该id中的第一个元素)。
document.getElementsByClassName("txtHint").innerHTML = "";
因为您得到一个NodeList并试图设置innerHTML，所以无效。jQuery可以让您摆脱这种情况，因为它将运行/设置返回项的整个列表中的大部分内容。
$('.inputs').append(..)
尝试查找带有class="inputs"的所有元素并将其附加到其中。在您的例子中，您可能需要输入一个特定的id，所以$("#service").append()
根据项目的不同，将元素传递给任何需要追加到元素的函数可能更干净。
onmouseout="showUser(this)"，然后在函数中使用this
function showUser(element) {
var str = element.value;
....
$(element).append(...);
}}但这完全取决于你想要达到的目标和方法的目的。
所有的jQuery选择器都在他们的网站上：http://api.jquery.com/category/selectors/搜索你需要的东西。
https://stackoverflow.com/questions/36017889
复制相似问题
腾讯云开发者
