Question

我有一个小问题，我想查询我的数据库，所以当用户使用自动完成时，我可以在另一列上获得该产品的库存＆＃39; td＆＃39;名为 * Exist Act * ，现在好了，当我移出任何文本框时，这个新的脚本改变了所有 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);
     }
      });
       });

对此进行了

function 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

＆＃13;

<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>

＆＃13;

这是动态输入的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

现在好了，当我移出任何文本框时，这个新的脚本会更改All of the Exist Act列的值。是否有解决方案，所以脚本只是更改同一行的值？

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

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

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

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

由于你已经拥有$this，这将保存触发事件的当前输入元素，然后$this.closest('tr')将获得输入被包装的父tr。现在追溯到元素在此tr中的txtHint类，然后只更改它。

Answer 2

如果您正在使用JQuery，并且所有元素容器都将具有.input类，则使用$(".input").html()来访问元素的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);

Answer 3

首先，我会看看选择器如何在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"查找所有元素并向其附加HTML。在您的情况下，您可能需要输入的特定ID，因此$("#service").append()

根据项目的不同，将元素传递给需要附加到元素的任何函数可能更清晰。

onmouseout="showUser(this)" 然后在函数

中使用this

function showUser(element) {
var str = element.value;
....
$(element).append(...);
}}

但这完全取决于你想要实现的目标和方法目的。

所有jQuery选择器都在他们的网站上： http://api.jquery.com/category/selectors/搜索您需要的内容。

如何在动态输入上使用GetElementsByClassName（）

3 个答案: