<!DOCTYPE html>
<html>
    <head>
        <title>Employee Details</title>
        <style>
        table,th,tr,td{
        border: 1px solid black;
        }
        #add
        {
            padding-top:2em;
        }
        tr,td{
        border-collapse:collapse;
        }
        </style>
    </head>
    <body>
    <script>
        function addRow(){
        var table=document.getElementById("table1");
        var x3=document.getElementById("table1").rows.length;
        var x4=document.getElementById("table1").rows[x3].cells.value;
        console.log(x4);
        var row=table.insertRow(-1);
        var cell1=row.insertCell(0);
        var cell2=row.insertCell(1);
        var cell3=row.insertCell(2);
        var x=document.getElementById("ename").value;
        var x2=document.getElementById("emp_mail").value;
        cell1.innerHTML=(x4+1);
        cell2.innerHTML=x;
        cell3.innerHTML=x2;
        }
    </script>
        <h1 align="center">EMPLOYEE DETAILS</h1>
        <div align="center">
            <table  id="table1" style="width:50%">
                <tr>
                    <th>Employee ID</th>
                    <th>Name</th>
                    <th>E-mail ID</th>
                </tr>   
                <tr>
                    <td>100</td>
                    <td>Ram</td>
                    <td>ram_95@gmail.com</td>
                </tr>
                <tr>
                    <td>101</td>
                    <td>Suresh</td>
                    <td>suresh@gmail.com</td>
                </tr>
                <tr>
                    <td>102</td>
                    <td>Ramesh</td>
                    <td>hello2ramesh@gmail.com</td>
                </tr>
            </table>
            <div id="add" align:left style="width:50%">
            Name&nbsp;<input type="text" id="ename" placeholder="Employee Name" required><br><br>
            E-mail<input type="email" id="emp_mail" placeholder="E-mail" required><br><br>
            <input type="submit" value="Submit" onclick=addRow()>
            </div>
        </div>

    </body>
</html>

Здесь я пытаюсь получить значение первой ячейки последней строки и увеличить его на 1. и добавить его в следующую строку, но он всегда показывает Uncaught TypeError: Cannot read property 'cells' of null. Цель здесь - получить данные первой ячейки последней строки, увеличить их на 1 и добавить в следующую строку, используя значения, переданные пользователем через текстовые поля.

0
Sashi yadav 24 Окт 2018 в 04:57

2 ответа

Лучший ответ

Массивы (и структуры, подобные массиву) в javascript основаны на 0 ... поэтому массив длиной 1 будет иметь один элемент с индексом 0

Следовательно, для доступа к последней строке вы должны использовать rows.length - 1

Кроме того, row [n] .cells не имеет свойства с именем value, поэтому я не уверен, к чему вы там пытаетесь получить доступ - возможно, это cells[0].textContent как число (поскольку вы добавляете единицу к это позже в вашем коде) - поэтому для приведения textContent к числу просто используйте унарный + - см. код

Вы также злоупотребляете getElementById - см. код ниже

function addRow() {
  var table = document.getElementById("table1"); 
  // after this, can use table instead of document.getElementById("table1")
  var x3 = table.rows.length - 1; // subtract 1, because index is 0 based
  var x4 = +table.rows[x3].cells[0].textContent; // + coerces to number
  console.log(x4);
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var x = document.getElementById("ename").value;
  var x2 = document.getElementById("emp_mail").value;
  cell1.innerHTML = (x4 + 1);
  cell2.innerHTML = x;
  cell3.innerHTML = x2;
}
table,
th,
tr,
td {
  border: 1px solid black;
}

#add {
  padding-top: 2em;
}

tr,
td {
  border-collapse: collapse;
}
<h1 align="center">EMPLOYEE DETAILS</h1>
<div align="center">
  <table id="table1" style="width:50%">
    <tr>
      <th>Employee ID</th>
      <th>Name</th>
      <th>E-mail ID</th>
    </tr>
    <tr>
      <td>100</td>
      <td>Ram</td>
      <td>ram_95@gmail.com</td>
    </tr>
    <tr>
      <td>101</td>
      <td>Suresh</td>
      <td>suresh@gmail.com</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Ramesh</td>
      <td>hello2ramesh@gmail.com</td>
    </tr>
  </table>
  <div id="add" align:left style="width:50%">
    Name&nbsp;<input type="text" id="ename" placeholder="Employee Name" required><br><br> E-mail
    <input type="email" id="emp_mail" placeholder="E-mail" required><br><br>
    <input type="submit" value="Submit" onclick=addRow()>
  </div>
</div>

Теперь все должно работать так, как вы ожидаете.

0
Bravo 24 Окт 2018 в 02:15

Проблема в том, что длина массива всегда будет на единицу больше, чем последний индекс, поскольку массивы начинаются с позиции 0. Чтобы исправить свой код, измените эту строку:

var x4=document.getElementById("table1").rows[x3].cells.value;

В это:

var x4=document.getElementById("table1").rows[x3 - 1].cells.value;

И ваш код будет работать.

0
Jack Bashford 24 Окт 2018 в 02:00
52960078