Question

我定义了一个表，该表具有一个预定义的行，可以通过单击调用此函数的按钮来创建新行：

function newProduct()
{

var table=  document.getElementById("producttable");
//var table = trow.parentNode;
var clone = table.insertRow(-1); 
clone.insertCell(0);
clone.insertCell(1);
clone.insertCell(2);
clone.insertCell(3);
clone.insertCell(4);
clone.insertCell(5);
clone.insertCell(6);
clone.insertCell(7);
clone.insertCell(8);
clone.cells[0].innerHTML='<input type="text" class="form-control" name="psku[]" value="0"  />'
clone.cells[1].innerHTML='<input type="text" class="form-control" name="pname[]" value="" /><div class="result"></div>';
clone.cells[2].innerHTML='<input type="number" class="form-control" name="pqty[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[3].innerHTML='<input type="number" class="form-control" name="pcp[]" value="0" onkeyup="calcCost(this);" />';
clone.cells[4].innerHTML='<input type="number" class="form-control" name="ptp[]" value="0"  />';
clone.cells[5].innerHTML='<input type="number" class="form-control" name="ptax[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[6].innerHTML='<input type="number" class="form-control" name="pdisc[]" value="0"  onkeyup="calcCost(this);" />';
clone.cells[7].innerHTML='<input type="number" class="form-control" name="pfp[]" value="0" />';
clone.cells[8].innerHTML='<input type="checkbox"/>';
table.appendChild(clone);   
}

现在，我想对我正在使用JQuery的产品名称进行实时搜索。这是执行搜索的代码段。

$(document).ready(function()
{
$('#producttable tr').each(function(){
    $("td").eq(1).find(":input").on("keyup input", function()
    {
    var prodname = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if(prodname.length)
    {
        //get input value on change
        //document.write(prodname);
        $.get("product-search.php", {term: prodname},function(data)
        {
            // Display the returned data in browser
            //document.write(resultDropdown.className);
            if(data== "null")
                resultDropdown.empty();
            else
                resultDropdown.html(data);
        });
    } 
    else
        resultDropdown.empty();

    });

此查询对于前一个预定义行运行良好，即，如果我在“产品名称”字段中键入内容，则会给出相应的建议列表。但是它不适用于附加的新行。如何使用JQuery访问表的产品名称单元格？

Answer 1

$(document).ready(function() {
  $('#producttable').on('keyup input', 'tr td input', function(){
    var prodname = $(this).val();
    var resultDropdown = $(this).siblings(".result");

    if(prodname.length) {
      //get input value on change
      //document.write(prodname);
      $.get("product-search.php", {term: prodname},function(data){
        // Display the returned data in browser
        //document.write(resultDropdown.className);
        if(data== "null")
            resultDropdown.empty();
        } else {
            resultDropdown.html(data);
        }
      });
    } else {
      resultDropdown.empty();
    }
  });
});

希望这行之有效，因为#producttable一直存在，那么您只需要在其上放置一个点击处理程序，并且'tr td input'将确保该代码仅在单击输入时才运行。您不需要在每次添加新行时都手动添加事件处理程序

实时搜索不适用于表的附加行

1 个答案: