Question

我正在尝试将输入结果从textarea移到表中。我正在使用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>

textarea中的结果是

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

我期望的是

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

Answer 1

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

export class CheckboxConfigurableExample {
    pizzaIng: any;
    selectAll = false;

    constructor() {
        this.pizzaIng = [{
                name: "Pepperoni",
                checked: false
            },
            {
                name: "Sasuage",
                checked: true
            },
            {
                name: "Mushrooms",
                checked: false
            }
        ];
    }


    selectChildren() {

        for (var i = 0; i < this.pizzaIng.length; i++) {
            if (this.pizzaIng[i].checked === true) {
                return this.selectAll = true;
            } else {
                return this.selectAll = false;
            }

        }
    }




    updateCheck() {
        console.log(this.selectAll);
        if (this.selectAll === true) {
            this.pizzaIng.map((pizza) => {
                pizza.checked = true;
            });

        } else {
            this.pizzaIng.map((pizza) => {
                pizza.checked = false;
            });
        }
    }
}

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
}

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

尝试一下，我做了一些修改

<div nz-row>
    <nz-table nz-col nzSpan="22" [nzLoading]="loading"
              nzTitle="Assign a new role to the group" [nzData]="moduledata">
      <thead nzSingleSort>
        <thead>
          <tr>
            <th></th>
            <th nzShowSort nzSortKey="module">Module</th>
            <th nzShowFilter [nzFilters]="filterrole"
                (nzFilterChange)="updateFilter($event)">Role</th>
          </tr>
        </thead>
      <tbody>
        <tr *ngFor="let module of moduledata">
          <td nzShowCheckbox name='tableCheck' id='tableCheck'></td>
          <td>{{module.module}}</td>
          <td>{{module.role}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>

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

3 个答案: