Проверка содержимого таблицы перед добавлением нового содержимого

Я пытаюсь создать таблицу, в которой хранятся пользователи. То, что я смог построить, это таблица, в которой вы можете добавлять и удалять некоторых пользователей. Теперь я пытаюсь проверить содержимое перед добавлением строки. Если я выполню функцию, моя таблица будет экспоненциально расти, а не проверять содержимое перед добавлением нового пользователя.Проверка содержимого таблицы перед добавлением нового содержимого

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

источник

2015-04-10 Stijn Arnold

от того, что я вижу, что вы по-прежнему есть вызов функции 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); 
     } 
};

источник

2015-04-10 10:05:31 Tomaszeek

Когда я беру его из петли, он не будет выполнять insertRow функция. Когда я держу его в цикле, он добавит экспоненциально. содержимое ячеек всегда: «[object HTMLInputElement]». –

На самом деле вы, вероятно, можете сделать все это проще. В основном две петли должны быть достаточными, прежде всего, вы выполняете цикл по всем строкам и внутри этого цикла, если значение первого проверенного элемента дублируется, тогда вы зацикливаете остальные элементы строки, чтобы убедиться, что все элементы в строке дублируются. если вы установили флаг (переменную) в 1, чтобы он не добавлял строку, в противном случае она добавит строку. Не могли бы вы дать нам html-код, на котором вы работаете, с какими элементами вы работаете. Что касается значения ячейки, это потому, что введенное вами значение в ячейке введено, поэтому вы должны вызвать cell.val() или что-то еще. – Tomaszeek

var vCheck = row.cells [0] .value; не меняет это печально –

Проверка содержимого таблицы перед добавлением нового содержимого

ответ

Смежные вопросы