Question

我想将输入的值从文本框发送到另一个文本框。这是我的代码

$('.col_bot').on('click', function(e) {

      // alert('hoi');
      var a = parseInt(document.getElementById("nochapter").value);
      var ch = document.getElementById("ch");

      var HTML = '<table width=50% class="eg_form">';

      for (i = 0; i < a; i++) {
        HTML += '<tr><td align="center">';
        HTML += '<input type="text" id="aaa" name="aaa[]"></td>';
        HTML += '<td align="center">';
        HTML += '<input type="text" id="bbb" name="bbb[]"></td></td></tr>';

        document.getElementById("ch").innerHTML = HTML;
      }

      var arrr = document.getElementsByName("bbb[]");
      var arr = $(arr);
      var ar = arr.val();

      
            $("#bbb").keyup(function() {

              var edValue = document.getElementsByName("bbb[]");
              var s = $(edValue);
              var edValue2 = document.getElementsByName("aaa[]");
              var s2 = $(edValue2);

              for (var i = 0, iLen = arrr.length; i < iLen; i++) {
                alert(arrr[i].value);
                document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}';
              }
            });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="Number of rows" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" /> Summary
</div>

首先，您将输入所需的行数：

其次，您将输入详细信息，在输入时，摘要文本框将更新如下：

问题是摘要只会获得第一行。

Answer 1

你对这段代码有很多问题，我认为这是家庭作业，所以我只会帮助解决你遇到问题的部分，而且我不会重写你的代码，因为这违背了做自己的功课！

这是您遇到问题的功能：

$("#bbb").keyup(function() {

  var edValue = document.getElementsByName("bbb[]");
  var s = $(edValue);
  var edValue2 = document.getElementsByName("aaa[]");
  var s2 = $(edValue2);

  for (var i = 0, iLen = arrr.length; i < iLen; i++) {
    alert(arrr[i].value);
    document.getElementById("eg_hidden").value = '{' + s2.val() + ':' + s.val() + '}';
  }
});

这里有一些事情：

$("#bbb") - 有许多ID为bbb的元素，但ID应该是唯一的。
您要将s.val()和s2.val()的值添加到“eg_hidden”，但每次都会添加相同的值
您每次在循环中也会覆盖“eg_hidden”中的值。

解决这些具体问题：

将bbb id更改为类 - 到处执行此操作！
在循环中获取aaa[]和bbb[]的每个值。您已经在循环中获得了arrr[i]的值，因此您可以使用edValue / edValue2以相同的方式执行此操作，即在第一次循环时获取第一个bbb元素的值，第二个使用bbb

edValue[i]

将值添加到“eg_hidden”而不是替换它们。您可以使用+=代替=来执行此操作。不要忘记在循环之前重置值，这样就不会继续添加它。

新代码将类似于：

$(".bbb").keyup(function() {

  var edValue = document.getElementsByName("bbb[]");
  var s = $(edValue); // <- you don't need this
  var edValue2 = document.getElementsByName("aaa[]");
  var s2 = $(edValue2); // <- you don't need this

  document.getElementById("eg_hidden").value = "";  // empty this so we can add the new values

  for (var i = 0, iLen = edValue.length; i < iLen; i++) {
    document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}';
  }
});

工作示例：

$(document).ready(function() {

  $('.col_bot').on('click', function(e) {

    // alert('hoi');
    var a = parseInt(document.getElementById("nochapter").value);
    var ch = document.getElementById("ch");

    var HTML = '<table width=50% class="eg_form">';

    for (i = 0; i < a; i++) {
      HTML += '<tr><td align="center">';
      HTML += '<input type="text" class="aaa" name="aaa[]"></td>';
      HTML += '<td align="center">';
      HTML += '<input type="text" class="bbb" name="bbb[]"></td></td></tr>';

      document.getElementById("ch").innerHTML = HTML;
    }

    var arrr = document.getElementsByName("bbb[]");
    var arr = $(arr);
    var ar = arr.val();

    $(".bbb").keyup(function() {

      var edValue = document.getElementsByName("bbb[]");
      var s = $(edValue); // <- you don't need this
      var edValue2 = document.getElementsByName("aaa[]");
      var s2 = $(edValue2); // <- you don't need this

      document.getElementById("eg_hidden").value = "";  // empty this so we can add the new values

      for (var i = 0, iLen = edValue.length; i < iLen; i++) {
        document.getElementById("eg_hidden").value += '{' + edValue2[i].value + ':' + edValue[i].value + '}';
      }
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="test" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" />
</div>

Answer 2

$('.col_bot').on('click', function(e) {

      // alert('hoi');
      var a = parseInt(document.getElementById("nochapter").value);
      var ch = document.getElementById("ch");

      var HTML = '<table width=50% class="eg_form">';

      for (i = 0; i < a; i++) {
        HTML += '<tr><td align="center">';
        HTML += '<input type="text"  name="aaa"></td>';
        HTML += '<td align="center">';
        HTML += '<input type="text"  name="bbb"></td></td></tr>';

        document.getElementById("ch").innerHTML = HTML;
      }

  $("input[name=\"bbb\"]").keyup(function() {
  //alert();
    var s= $("input[name=\"bbb\"]");
    var s2= $("input[name=\"aaa\"]");
    document.getElementById("eg_hidden").value="";
      $.each( $("input[name=\"bbb\"]"), function(i, ele){
       document.getElementById("eg_hidden").value += (i>0 ? ',':'') +'{' + s2[i].value + ':' + s[i].value + '}';;
     });
     });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="Number of rows" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" /> Summary
</div>

Answer 3

$('.col_bot').on('click', function(e) {
	// Start of the HTML-Table
	var HTML = '<table width=50% class="eg_form">';
  // $('#nochapter').val() gets the value of the field with the id="nochapter"; See jQuery-Selectors: https://api.jquery.com/category/selectors/ (and for the val-function: http://api.jquery.com/val/)
  for (i = 0; i < parseInt($('#nochapter').val()); i++) {
    HTML += '<tr><td align="center">';
    HTML += '<input type="text" class="aaa" name="aaa[]"></td>';
    HTML += '<td align="center">';
    HTML += '<input type="text" class="bbb" name="bbb[]"></td></td></tr>';
  }
  // http://api.jquery.com/html/ for .html
  $('#ch').html(HTML);
  $('.aaa, .bbb').keyup(function () {
    // Start the summary
    var summary = "{";
    var num_elements = 0;
    // Loop through all elements with class="aaa"
    $('.aaa').each(function () {
    	// $(this) becomes in this function one of the elements of $('.aaa')
      var a = $(this).val();
      // Here you need to pay attention on the html-structure, earlier you declared that the table is custructed like this: table > tr > td > input.aaa now with $(this).parent().parent() you will select the parent of the parent of the current .aaa. So now the selected element is table > tr. With $('.bbb', $(this).parent().parent()) you will now get every child (or child of a child and so on) of table > tr with the class .bbb. Now when you remember how you constructed the table, you have in each row (tr) only one child with class="bbb", so you can savely take the value of it.
      var b = $('.bbb', $(this).parent().parent()).val();
      // If both elements have a value which actually are not empty (length > 0), than append it to the string and add a comma at the end
      if (a.length >  0 && b.length > 0) {
        summary += a + ':' + b + ",";
        num_elements++;
      }
    });
    if (num_elements) {
    	// As you don't want a comma after the last added element, remove it and add the closing bracket.
      summary = summary.slice(0, summary.length-1);
      summary += "}";
    } else {
    	// If there is no object because all are empty: Just show nothing in the field.
    	summary = "";
    }
    // Update the field
    $('#eg_hidden').val(summary);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abab" id="abab">
  <input type="text" id="nochapter" />
  <input type="button" value="Number of rows" class="col_bot" />
  <div id="ch" class="abab"></div>
  <br>
  <input type="text" id="eg_hidden" name="eg_hidden" /> Summary
</div>

来自javascript的数组文本框并发送到另一个文本框

3 个答案: