Question

我正在尝试创建一个存储用户的表。我能够构建的是一个表，您可以在其中添加和删除一些用户。现在我想在添加行之前检查内容。如果我执行该函数，我的表将以指数方式增长，而不是在添加新用户之前检查内容。

  //    push on the button excecutes addRow
function addRow(){

    var firstName=document.getElementById("firstName").value;
    var surName=document.getElementById("surName").value;
    var email=document.getElementById("email").value;
    compareRows(document.getElementById('Gebruikers'));

}

//first i want to compare content of rows vs the inputfields

function compareRows(){
    var table=document.getElementById("Gebruikers");
    var rowCount=table.rows.length;

//check first cell of the row. when it is the same as firstName check surName
        for(var i=0;i<rowCount;i++) {
            var row=table.rows[i];
            var vCheck=row.cells[0];
            if(vCheck===firstName) {

//check second cell of the row. when it is the same as surName check email              
                for(var i=0;i<rowCount;i++) {
                    var row=table.rows[i];
                    var vCheck=row.cells[1];
                    if (aCheck===surName) {

//check third cell of the row. when it is the same as email show prompt that use allready exists.
//if email doesnt exist check next row  
                        for(var i=0;i<rowCount;i++) {
                            var row=table.rows[i];
                            var eCheck=row.cells[2];
                            if (eCheck===email) {
                                prompt ("Deze gebruiker bestaat al!")
                            };
                        };
                    };
                };

//when all rows have been checked for input execute insertRow function
            } else {
            insertRow(firstName, surName, email);
            };
        } 
};


function insertRow(firstName, surName, email)
{
    var row = document.createElement("tr");
    var table = document.getElementById("Gebruikers");

    table.appendChild(row);

    row.appendChild(createTd(firstName));
    row.appendChild(createTd(surName));
    row.appendChild(createTd(email));

    var cell4=row.insertCell(3);
    var remove=document.createElement("input");
    remove.type="checkbox";
    remove.name="chkbox[]";
    cell4.appendChild(remove);
}

function createTd(text) {
    var td = document.createElement("td");
    td.innerText = text;
    return td;
}


function deleteRow(){
    var table=document.getElementById("Gebruikers");
    var rowCount=table.rows.length;
        for(var i=0;i<rowCount;i++) {
            var row=table.rows[i];
            var chkbox=row.cells[3].childNodes[0];
                if(null!=chkbox&&true==chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
        }

这是HTML代码：

<!DOCTYPE html>
<html>
    <script src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
<head>
    <title></title>
</head>

<body>

    <table class="table" id="Users">
        <tr>
            <td>Name</td>
            <td>Surname</td>
            <td>e-mail</td>
            <td>remove</td>
        </tr>
    </table>

    <br>

    <form>
        Name:<br>
        <input type="text" id="firstName"> <br>
        Surname:<br>
        <input type="text" id="surName"> <br>
        E-mail:<br>
        <input type="text" id="email"> <br>
    </form>

    <br>

    <button id="addButton" onclick="addRow()">add</button>
    <button id="deleteButton" onclick="deleteRow()">delete</button>

</body>

</html>

Answer 1

从我可以看到你仍然在循环体内调用insertRow函数，这意味着如果它们不匹配，它将添加与表中已有的行数。我要做的是添加一些变量，如果比较行将返回true，将会改变。

var temp = 0; if(all_rows=true){temp++;}

在循环之后我会添加：

if(temp > 0) {insertRow();}

所以它会是这样的：

function compareRows(){
    var table=document.getElementById("Gebruikers");
    var rowCount=table.rows.length;
var temp = 0;
//check first cell of the row. when it is the same as firstName check surName
        for(var i=0;i<rowCount;i++) {
            var row=table.rows[i];
            var vCheck=row.cells[0];
            if(vCheck===firstName) {

//check second cell of the row. when it is the same as surName check email              
                for(var i=0;i<rowCount;i++) {
                    var row=table.rows[i];
                    var vCheck=row.cells[1];
                    if (aCheck===surName) {

//check third cell of the row. when it is the same as email show prompt that use allready exists.
//if email doesnt exist check next row  
                        for(var i=0;i<rowCount;i++) {
                            var row=table.rows[i];
                            var eCheck=row.cells[2];
                            if (eCheck===email) {
                                prompt ("Deze gebruiker bestaat al!")
                                temp++;
                            };
                        };
                    };
                };

//when all rows have been checked for input execute insertRow function
            } else {

            };

        } 
        if(temp > 0)
        {
         insertRow(firstName, surName, email);
         }
};

在添加新内容之前检查表内容

1 个答案: