javascript 如何将数据从动态表读入数组并在添加更多行时验证数据

omvjsjqw  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(77)

我刚刚开始用javascript编程,我遇到了这个困难:我用html和javascript创建了一个动态表,我已经创建了添加行和删除行的函数,但是我在将接收到的数据保存到数组中时遇到了一些困难,它只将第一行保存到数组中,我想让它循环并保存数组中所有各自的数据。

type here

我的html代码:

<table id="mytableform1" width="100%" border="1" cellspacing="0" cellpadding="0" style="border: 1px solid;color: #5c6873;background-color: #fff;border-color: #e4e7ea;">
                <tr>
                    <td rowspan="2" align="center" valign="top">Vértices da poligonal</td>
                    <td colspan="3" align="center" valign="top">Coordenadas no sistema PT -  TM06/ETRS89</td>
                </tr>

                <tr>
                    <td align="center" valign="top">M(m)</td>
                    <td align="center" valign="top">P(m)</td>
                </tr>

                <tr id="allDataRow">
                    <td align="center" valign="top">
                        <input style="width: 100%;" class="form-control" type="number" name="namesavedata1[]" id="val_1" placeholder="1">
                    </td>
                    <td align="center" valign="top">
                        <input style="width: 100%;" class="form-control" type="number" name="namesavedata2[]" id="val_2"placeholder="00000,000">
                    </td>
                    <td align="center" valign="top">
                        <input style="width: 100%;" class="form-control" type="number" name="namesavedata3[]" id="val_3" placeholder="00000,000">
                    </td>
                </tr>
            </table>

            <div style="display:flex;justify-content: space-between;">

                <div style="display:flex;">
                    <button onclick="addRow()" style="background-color: #673ab7c7;color: white;" class="btn" type="button">
                        <span class="bi bi-plus-square-dotted"></span>+
                    </button>
                    <button onclick="deleteRow()" style="background-color: #673ab7c7;color: white;" class="btn" type="button">
                        <span class="bi bi-plus-square-dotted"></span>-
                    </button>
                </div>

                <div style="display:flex;">
                    <button type="button" name="button" onclick="arraySaveData()" class="btn" style="background-color: #673ab7c7;color: white;">
                        Validar
                    </button>

                    
                </div>
                
            </div>

我的Javascript代码:

function arraySaveData() {

    var data = [];
    //var dataMain = [];

    //for (var index = 0; index < 1; index++) {

    $('#mytableform1').each(function () {
        data.push({
            verticePolig: $('input[name="namesavedata1[]"]').val(),
        });
        data.push({
            coordM: $('input[name="namesavedata2[]"]').val(),
        });
        data.push({
            coordP: $('input[name="namesavedata3[]"]').val(),
        });

    });

    console.log(data);
    //dataMain.push(data);
    //}

    //console.log(dataMain);

}

//Button add table row 
function addRow() {

    var table = document.getElementById("mytableform1");
    var rowCount = table.rows.length;

    x = document.getElementById("mytableform1").rows.length;

    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    //numeração crescente
    for (var i = 0; i < x; i++) {

        cell1.innerHTML = '<input type="text" class="form-control" name="namesavedata1[]" align="center" placeholder="' +
            (cell1.innerHTML = i + 0) +
            '">';

        cell2.innerHTML = '<input type="text" class="form-control" name="namesavedata2[]" align="center" placeholder="00000,000">';

        cell3.innerHTML = '<input type="text" class="form-control" name="namesavedata3[]" align="center" placeholder="00000,000">';

    }
}



//Button delete table row 
function deleteRow() {
    var table = document.getElementById("mytableform1");
    var rowCount = table.rows.length;

    if (rowCount >= 4) {
        table.deleteRow(rowCount - 1);
    } else {
        Swal.fire({
            title: 'Erro!',
            text: "Não pode apagar este campo",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e55353',
            cancelButtonColor: '#636f83',
            confirmButtonText: 'ok'
        })
    }

}
gmol1639

gmol16391#

问题出在循环中,你必须把数据相加。你总是在每个循环中取相同的3个输入。
对于回调函数所做的每个循环,您都应该在回调函数中接收当前元素,类似于下面的示例:

$('#mytableform1').each(function (_, element) {

  // element is the current row <tr id="allDataRow">
  // now you find children element value
  const verticePolig = $(element).find('namesavedata1[]').val()
  const coordM = $(element).find('namesavedata2[]').val()
  const coordP = $(element).find('namesavedata3[]').val()

  data.push({
    verticePolig,
    coordM,
    coordP
  })

});

相关问题