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

问题描述：

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

$('.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>

首先，你行的输入数你想：

二你将输入的细节，而你的输入，汇总文本框会如下更新：

问题是总结只会得到第一行。

到底在哪在你的代码是你所遇到的问题，以及什么是*特定*问题？ – FluffyKitten

的问题是总结只会得到第一行先生 – angelloucelle

您可以更新您的问题，包括运行的代码，所以我们可以看到发生了什么和什么可能会错了吗？你现在的代码有错误，所以看起来像缺少某些东西。 – FluffyKitten

答

你有很多与此代码的问题，我想这是家庭作业，所以我只打算帮助的部分，你有问题，而且我不会重写你的代码，因为这不符合你自己的功课！

这是，你是有问题的功能：

$("#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[]每个值。您正在使用edValue[i]已经获得的arrr[i]值在循环，这样你就可以用同样的方法，即用edValue/edValue2做到这一点得到了第一bbb元素的值的第一次循环，第二bbb元素的第二次等
将值添加到“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>

谢谢你，这工作，并感谢您的关注^ _^ – angelloucelle

@angelloucelle很乐意帮忙！你现在应该仔细看看你的代码来整理它（例如，你有额外的变量arrr，arr和ar，你不用），我只是集中精力让它工作。我不是'先生'的方式，我是一个女人:) – FluffyKitten

hahahaha好了注意到，夫人。它确实帮助了我很多。嘿对不起，我的坏。女士^ _ ^ – angelloucelle

答

$('.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>

非常感谢你这位先生的作品 – angelloucelle

答

$('.col_bot').on('click', function(e) { 
 
\t // Start of the HTML-Table 
 
\t 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() { 
 
    \t // $(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) { 
 
    \t // 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 { 
 
    \t // If there is no object because all are empty: Just show nothing in the field. 
 
    \t 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>

谢谢你，先生，这也适用于我。 – angelloucelle

很高兴它适合你。但你应该看看你的编码风格。总是想想如果用户需要了解你的代码，它有多容易？例如，称为arrr，arr和ar的变量不是很自我解释。更多这里：http://wiki.c2.com/?GoodVariableNames – movabo

好吧，先生。指出。非常感谢你的建议。祝你有美好的一天！ – angelloucelle

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

相关推荐