个人中心
gpt4 book ai didi

javascript - 添加新内容之前检查表格内容

转载 作者：行者123 更新时间：2023-11-28 07:26:50 24 4
gpt4 key购买 nike

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

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

最佳答案

据我所知，您仍然可以在循环体内调用 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);
         }
};

关于javascript - 添加新内容之前检查表格内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29558173/

24 4 0
文章推荐： c++ - Visual Studio 2012 C++ 编译程序未加载文件
文章推荐： ios - UICollectionViewCell 中托管的 UITableViewController 的滚动问题
文章推荐： c++ - C++ 游戏设计
文章推荐： c++ - 将图像路径发送到另一个函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com