Bdtjtk

I'm trying to move the input result from textarea into a table. I'm using javascript to get the array value.

But what I can do now is only display it in one textarea. I'm confused how to seperate the array value into table.

<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>

The result in textarea is

Image link https://postimg.cc/fJWHhxp9

What i'm expected is

+---------+---------+

| X Point | Y Point |

+---------+---------+

|     123 |     456 |

|     123 |     456 |

|     123 |     456 |

|     123 |     456 |

+---------+---------+

You have fixed length of inputs you can easily use array as values and generate the table out of it, instead of string you can keep that as an array and append the rows.

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>

This should help you process the text:

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);

try this i have made some changes

  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);



        }