EN VI

Check already data exist in table column HTML using Javascript?

How to Check already data exist in table column HTML using Javascript

i'm newbie in web programming. I am trying to add data to a table dynamically. Before the data is entered in the table, I want to first check whether the data has previously existed in a more specific column, such as: the name column.

function checkInput(){

var isEmpty = false
tstudentname = document.getElementById("tstudentname").value
tage = document.getElementById("tage").value
tlocation = document.getElementById("tlocation").value


if(tstudentname === "" || tstudentname <= 0){               
    document.getElementById("tstudentname").classList.add("is-invalid");
    isEmpty = true;
    document.getElementById("tstudentname").focus();
}
else if(tlocation === "" || tlocation <= 0){                
    document.getElementById("tlocation").classList.add("is-invalid");
    isEmpty = true;
    document.getElementById("tlocation").focus();
}
else if(tage === "" || tage <= 0){
    document.getElementById("tage").classList.add("is-invalid");
    isEmpty = true;
    document.getElementById("tage").focus();
}
const studentName = document.querySelector("#tstudentname").value;
let found = false;
document.querySelectorAll("#mytable tbody td:nth-child(1)").forEach(cell => {
    if(cell.innerText.trim() === studentName.trim()){
        found = true
        alert("Name Already Exists")
    }
})
return isEmpty;}


function AddRow(){
if(!checkInput()){var number = 0;

    var trows = document.getElementById("mytable").rows;

    for (var i = 0; i < trows.length; i++) {
    number++;
    }

    var a = document.forms['myform']['tstudentname'].value;
    var b = document.forms['myform']['tage'].value;
    var c = document.forms['myform']['tlocation'].value;
    let table = document.getElementById("tableBody");
    let row = document.createElement("tr")

    let c1 = document.createElement("td")
    let c2 = document.createElement("td")
    let c3 = document.createElement("td")
    c1.innerText = number
    c2.innerText = a
    c3.innerText = b
    c4.innerText = c
    
    row.appendChild(c1);
    row.appendChild(c2);
    row.appendChild(c3);

    // Append row to table body
    table.appendChild(row)
    }}


<div class="row gutters">
    <div class="col-sm-4 col-12">
        <form name="myform" method="POST">
        <div class="form-group">
            <label>STUDENT NAME</label>
            <input type="" class="form-control form-control-lg" id="tstudentname" >
        </div>
    </div>
    <div class="col-sm-2 col-12">
        <div class="form-group">
            <label>AGE</label>
            <input type="" class="form-control form-control-lg" id="tage">
        </div>
    </div>
    <div class="col-sm-2 col-12">
        <div class="form-group">
            <label>LOCATION</label>
            <select class="select-single js-states form-control" id="tlocation">
                <option>NEW YORK</option>
                <option>LA</option>
            </select>
        </div>
    </div>
    </form>
</div>
<button type="button" class="btn btn-success" onclick="AddRow()">ADD</button>

<table class="table table-bordered table-striped" id="mytable">
    <thead>
        <tr>
            <th>NO</th> 
            <th>STUDENT NAME</th>
            <th>AGE</th>
            <th>LOCATION</th>
        </tr>
    </thead>
    <tbody id="tableBody">
    </tbody>
</table>

with the above code I get all the same values in the table. what I want is to check the value in just one column, for example the name column. please help me

Solution:

Edit: Edited my answer according to the new data you provided. Made some changes to checkInput() to correctly return true or false if name was found and also added a line for the location column

function checkInput() {
  const studentName = document.querySelector("#tstudentname").value.trim();
  let found = false;

  document.querySelectorAll("#mytable tbody td:nth-child(2)").forEach(cell => {
    if (cell.innerText.trim() === studentName) {
      found = true;
      alert('Name Already Exists');
      return;
    }
  });

  return found;
}

function AddRow() {
  if (!checkInput()) {
    var number = document.getElementById("mytable").rows.length;

    var a = document.forms['myform']['tstudentname'].value.trim();
    var b = document.forms['myform']['tage'].value.trim();
    var c = document.forms['myform']['tlocation'].value.trim();

    let table = document.getElementById("tableBody");
    let row = document.createElement("tr");

    let c1 = document.createElement("td");
    let c2 = document.createElement("td");
    let c3 = document.createElement("td");
    let c4 = document.createElement("td"); // Add this line for LOCATION column
    c1.innerText = number;
    c2.innerText = a;
    c3.innerText = b;
    c4.innerText = c; // Add this line for LOCATION column

    row.appendChild(c1);
    row.appendChild(c2);
    row.appendChild(c3);
    row.appendChild(c4); // Add this line for LOCATION column

    // Append row to table body
    table.appendChild(row);
  }
}

<div class="row gutters">
  <form name="myform" method="POST">
    <div class="col-sm-4 col-12">

      <div class="form-group">
        <label>STUDENT NAME</label>
        <input type="" class="form-control form-control-lg" id="tstudentname">
      </div>
    </div>
    <div class="col-sm-2 col-12">
      <div class="form-group">
        <label>AGE</label>
        <input type="" class="form-control form-control-lg" id="tage">
      </div>
    </div>
    <div class="col-sm-2 col-12">
      <div class="form-group">
        <label>LOCATION</label>
        <select class="select-single js-states form-control" id="tlocation">
          <option>NEW YORK</option>
          <option>LA</option>
        </select>
      </div>
    </div>
  </form>
</div>
<button type="button" class="btn btn-success" onclick="AddRow()">ADD</button>

<table class="table table-bordered table-striped" id="mytable">
  <thead>
    <tr>
      <th>NO</th>
      <th>STUDENT NAME</th>
      <th>AGE</th>
      <th>LOCATION</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>