如何将文本框值附加到最近的跨度?

时间:2017-11-13 17:06:57

标签: jquery datatables

我正在使用jQuery数据表,并希望对其应用计算,很难这样做,我想将textbox的值附加到不可见的跨度。我怎样才能做到这一点?使用以下代码,它只在1个相同ID的文本框上工作,我想在同一个id的所有文本框上应用。

$('td').each(function() {
  $("input").keyup(function() {
    var txtvalue = $('#curr_sales').val();
    $("#curr").closest('span').text(txtvalue);
    console.log(txtvalue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
<td><input type="number" id="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span id="curr"></span></td>
</tr></table>

2 个答案:

答案 0 :(得分:0)

ID必须是唯一的,它们无法回收已存在的ID。请改用classes

此外,要将结果输出到最近的<span>,请转到父级,然后从<span>中找到<tr>个孩子。

此外,如果需要,您可以使用on()功能将多个事件绑定到<input>

输出

Sample output

代码段

&#13;
&#13;
$('td').each(function() {
  $("input").on("keyup blur", function() {
    var txtvalue = $(this).val();
    $(this).parent().find('span').text(txtvalue);
    console.log(txtvalue);
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
    <td><input type="number" class="curr_sales" size="5" name="curr_sales" placeholder="Current Sales" required><span class="curr"></span></td>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript

我会完全重写(下面的例子)。定位ID是有问题的,因为你只能有一个带有和id的html元素,这使得jQuery不可重用。定位span也会使jQuery代码变得脆弱,因为其他人出现并将跨度更改为div并且jQuery停止工作。

$(document).ready(function() {
  $(".js-populate-target").on('keyup change', function() {
    var txtvalue = $(this).val();
    var selector = $(this).data('populate-target');
    $(this).closest('.js-populate-container').find(selector).text(txtvalue);
    console.log(txtvalue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table>
    <tr>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target" data-populate-target=".js-populator">
        <span class="js-populator"></span>
      </td>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target" data-populate-target=".js-populator">
        <span class="js-populator"></span>
      </td>
      <td class="js-populate-container">
        <input type="number" size="5" name="curr_sales" placeholder="Current Sales" required class="curr_sales js-populate-target"  data-populate-target=".js-blah">
        <span class="js-blah"></span>
      </td>
    </tr>
  </table>

通过将目标放在数据字段中,您现在可以具体说明每个项目定位哪些元素。