javascript - 如何在动态输入上使用 GetElementsByClassName()

Question

我遇到了一个小问题，我想查询我的数据库，这样当用户使用自动完成功能时，我可以在名为 *Exist Act * 的另一列“td”上获取该产品的库存，现在好了使用这个新脚本，当我移出任何文本框时，它会更改所有 Exist Act 列的值。是否有解决方案，以便脚本仅更改同一行上的值？这是我的代码，我已经更改了整个脚本，这个

$(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();

}}

HTML

<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();

}}

抱歉我的英语不好

Answer 1

Ok now with this new scrip when i moveout of the any textbox it change the value of All of the Exist Act column.Is there a solution so the script just change the value on the same row?

你做的一切都是正确的。唯一的问题是你正在使用这段代码

$('.txtHint').html(data);

在你的ajax成功方法中，它的作用是选择整个表中具有类txtHint的所有元素，然后更改所有这些元素。您只需要选择带有 txtHint 类的相应行元素，因此您可以做的是遍历到顶部以找到包含此输入元素的 tr，然后查找在此 tr 中的 txtHint 类命名元素，并仅更改它。所以使用下面的代码

$this.closest('tr').find('.txtHint').html(data);

由于您已经有了 $this 这将保存触发事件的当前输入元素，然后 $this.closest('tr') 将为您获取父元素输入被包装在 tr 中，现在追踪到此 tr 中具有类 txtHint 的元素，然后仅更改该元素。