javascript - 使用动态表 Jquery 和 Javascript 自动完成

Question

我已经解决了一些问题，现在它可以工作了，感谢这个页面，他们在另一件事上帮助了我。现在，这就是我获取代码的方式，自动完成功能可以工作，但只有我才能使用显示页面时加载的代码，如果我输入第一个，自动完成脚本会输入以下内容的描述、数量和价格:我输入的代码，而不仅仅是第一行或我想要放入代码的行。这是我现在的代码。

$(document).ready(function() {
  //this is added just to pre-populate some rows
  addRow2('dataTable');



  $(".chkall").click(function() {
    if ($(".chkall").is(':checked')) {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


  $('.get_total, .g_total').click(function(e) {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
    });
    console.log(g_total);
    $('.g_total').html(g_total);
  })
  $('input.total').on('change', function() {
    g_total = 0;
    $('input.total').each(function() {
      g_total += eval($(this).val());
      $('.g_total').html(g_total);
    })
  })
})

function grandTotal() {
  g_total = 0;
  $('input.total').each(function() {
    g_total += eval($(this).val());
    $('.g_total').html(g_total);
  })
}


function addRow2(tableid) {

  

  var table = $('#' + tableid);
  rowCount = table.children().length;
  //console.log(table.children().length);
  newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input class="codigo" type="text" name="codigo[]"></td><td><input type="text" class="descripcion" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text"  value="0" class="total" name="total[]"></td></tr>';
  table.append(newrow);

  $("#dataTable input[id^='codigo']").autocomplete({
    source:'buscarcompra.php',
    minLength:1
});

  $("#dataTable input[id^='codigo']").focusout(function(){
  $.ajax({
        url:'producto.php',
      type:'POST',
      dataType:'json',
      data:{ codigo: $("#dataTable input[id^='codigo']").val()}
  }).done(function(respuesta){
       $("#dataTable input[name^='descripcion']").val(respuesta.descripcion);
       $("#dataTable input[name^='precio']").val(respuesta.precio);
  });
});
}



function calc2(_row) {
  row = _row.closest('.dataRow');
  //console.log();
  //
  qty = row.find('.cantidad').val();
  price = row.find('.precio').val();
  total = parseFloat(qty) * parseFloat(price);
  console.log('qty:' + qty + ' * price:' + price + ' = ' + total);
  row.closest('.dataRow').find('.total').val(total);
  grandTotal();
}



function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

.g_total {
  width: 100px;
  background-color: #ccc;
  height: 20px;
  display: inline-block;
  float: right;
}
.cantidad,
.precio,
.total {
  /*
  height: 50px;
  width: 40px;*/
  text-align: center;
}
.cantidad {
  width: 84px;
}
.codigo,
.descripcion {
  width: 54px
}
.precio,
.total {
  width: 121px;
}

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
<h1>CARRITO DE COMPRAS</h1>
<INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" />

<INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" />
<input type="button" class="get_total" value="Get Total" />
<form id="myform" action="<?php echo $_SERVER['PHP_SELF']  ?>" method="post">



  <TABLE border="1">
    <thead>
      <tr>
        <th>
          <input type="checkbox" class="chkall">
        </th>
        <th class="codigo">CODIGO</th>
        <th class="descripcion">DESCRIPCION</th>
        <th class="cantidad">CANTIDAD</th>
        <th class="precio">PRECIO</th>
        <th class='total'>TOTAL</th>
      </tr>
    </thead>
    <tbody id="dataTable">

    </tbody>
  </TABLE>
  </div>
  </br>
  <div class="g_total">
    </span>

Answer 1

您可以创建一个函数来附加 .autocomplete()和.focusout()事件至:last .codigo元素位于 .ready()处理程序和 addRow函数调用。替代+ eval() 的运算符来电。

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$(document).ready(function() {

  //this is added just to pre-populate some rows
  addRow2('dataTable');

  addAutocompleteAndFocusout("#dataTable input[class^='codigo']", availableTags);

  $(".chkall").click(function() {
    if ($(".chkall").is(':checked')) {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("#dataTable input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


  $('.get_total, .g_total').click(function(e) {
    g_total = 0;
    $('input.total').each(function() {
      g_total += +$(this).val();
    });
    console.log(g_total);
    $('.g_total').html(g_total);
  })

  $('input.total').on('change', function() {
    g_total = 0;
    $('input.total').each(function() {
      g_total += +$(this).val();
      $('.g_total').html(g_total);
    })
  })
})

function addAutocompleteAndFocusout(selector, src) {
  (typeof selector === "string" ? $(selector) : selector).autocomplete({
      source: src
    })
    .focusout(function() {
      console.log("focusout called")
    })
}

function grandTotal() {
  g_total = 0;
  $('input.total').each(function() {
    g_total += +$(this).val();
    $('.g_total').html(g_total);
  })
}


function addRow2(tableid) {
  var table = $('#' + tableid);
  rowCount = table.children().length;
  newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input class="codigo" type="text" name="codigo[]"></td><td><input type="text" class="descripcion" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text"  value="0" class="total" name="total[]"></td></tr>';
  table.append(newrow);
  // attach `.autocomplete()`, `.focusout()` to `:last` `.codigo` element
  addAutocompleteAndFocusout(table.find(".codigo:last"), availableTags);
}

function calc2(_row) {
  row = _row.closest('.dataRow');
  qty = row.find('.cantidad').val();
  price = row.find('.precio').val();
  total = parseFloat(qty) * parseFloat(price);
  console.log('qty:' + qty + ' * price:' + price + ' = ' + total);
  row.closest('.dataRow').find('.total').val(total);
  grandTotal();
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    alert(e);
  }
}

.g_total {
  width: 100px;
  background-color: #ccc;
  height: 20px;
  display: inline-block;
  float: right;
}
.cantidad,
.precio,
.total {
  /*
  height: 50px;
  width: 40px;*/
  text-align: center;
}
.cantidad {
  width: 84px;
}
.codigo,
.descripcion {
  width: 54px
}
.precio,
.total {
  width: 121px;
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
<h1>CARRITO DE COMPRAS</h1>
<INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" />

<INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" />
<input type="button" class="get_total" value="Get Total" />
<form id="myform" action="" method="post">
  <TABLE border="1">
    <thead>
      <tr>
        <th>
          <input type="checkbox" class="chkall">
        </th>
        <th class="codigo">CODIGO</th>
        <th class="descripcion">DESCRIPCION</th>
        <th class="cantidad">CANTIDAD</th>
        <th class="precio">PRECIO</th>
        <th class='total'>TOTAL</th>
      </tr>
    </thead>
    <tbody id="dataTable">

    </tbody>
  </TABLE>
  <br/>
  <div class="g_total">

  </div>
</form>