如何使用Javascript将数组从文本区域移动到表

Question

>我正在尝试将输入结果从文本区域移动到表中。我正在使用javascript来获取数组值。

但是我现在能做的只是在一个文本区域中显示它。我很困惑如何将数组值分成表。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br>
x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br>
x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br>
x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br>
<input type="button" value="next" onclick="next3();">
<textarea id="koord" value="" style="width:220px;"></textarea>
<script>
function next3(){
    var vx = String($("input[name='px[]']").map(function(){return $(this).val();}).get());  
    var vy = String($("input[name='py[]']").map(function(){return $(this).val();}).get());
    var vxArr = vx.split(",");
    var vyArr = vy.split(",");
    var lenArr = vxArr.length;
    var isi = "";
    for (i = 0; i < lenArr; i++) {
        var koord = "X" + vxArr[i] + " " + "Y" + vyArr[i];
        //alert (koord);
        var isi = isi + ', ' + koord;
    } 
    //alert (isi);
    var lastChar = isi.substr(2); // => "1"
    $("#koord").val(lastChar);
}
</script>

文本区域中的结果是

图像链接 https://postimg.cc/fJWHhxp9

我所期望的是

+---------+---------+
| X Point | Y Point |
+---------+---------+
|     123 |     456 |
|     123 |     456 |
|     123 |     456 |
|     123 |     456 |
+---------+---------+

Answer 1

您有固定长度的输入，您可以轻松地将数组用作值并从中生成表，而不是字符串，您可以将其保留为数组并附加行。

function next3() {
  var vx = ($("input[name='px[]']").map(function() {
    return $(this).val();
  }).get());
  var vy = ($("input[name='py[]']").map(function() {
    return $(this).val();
  }).get());
  
  $('table tbody').html('');
  
  vx.forEach((a, index) => {
    if (a !== '' && vy[index] !== '') {
      $('table tbody').append('<tr><td>' + a + '</td><td>' + vy[index] + '</td></tr>')
    }
  })
}

table {
  border: 1px solid black
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br> x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br> x <input type="text" name="px[]" value="" /> y <input type="text"
  name="py[]" value="" /><br> x <input type="text" name="px[]" value="" /> y <input type="text" name="py[]" value="" /><br>
<input type="button" value="next" onclick="next3();">
<textarea id="koord" value="" style="width:220px;"></textarea>
<table>
  <thead></thead>
  <tbody></tbody>
</table>

Answer 2

这应该可以帮助您处理文本：

const text = 'x123 y123, x234 y234, x345 y345';
// split text on commas ','
const splitTextArray = text.split(',');
console.log(splitTextArray);
// now map to objects you can reference
const textMapArray = splitTextArray.map(text => {
  // now trim teading/trailing whitespace and split text on space
  const splitText = text.trim().split(' ');
  // save each string from the second char on (i.e. removes the x/y)
  return {x: splitText[0].substring(1), y: splitText[1].substring(1) };
});
console.log(textMapArray);

Answer 3

试试这个我做了一些更改

  function next3() {
            var vx = String($("input[name='px[]']").map(function () { return $(this).val(); }).get());
            var vy = String($("input[name='py[]']").map(function () { return $(this).val(); }).get());
            var vxArr = vx.split(",");
            var vyArr = vy.split(",");
            var lenArr = vxArr.length;
            var isi = " "+"X Point" +" " + "Y Point"+'n';
            //var isi = "";
            for (i = 0; i < lenArr; i++) {
                var koord = "" + vxArr[i] + " " + "" + vyArr[i];
                //alert (koord);
                var isi = isi + 'n' + koord;
            }
            //alert (isi);
            var lastChar = isi.substr(1); // => "1"
            $("#koord").val(lastChar);
        }