如何为在javascript中单击按钮时调用的行分配ID

问题描述 投票：2回答：4

我正在尝试为每一行分配一个唯一的ID，然后修改具有特定数字ID的行。但是，由于每次按下按钮都会调用该函数，因此我总是得到相同的数字输出。这是我的JavaScript函数

[<script type="text/javascript">
    function insert_row(){
      var firstName = document.getElementById('first_name').value;
      var lastName = document.getElementById('last_name').value;
      var human = "human";
      var id =1;

      var table = document.getElementById("saving_table");

      // Create an empty <tr> element and add it to the 1st position of the table:
      var row = table.insertRow(1);
      row.id=id;
      var rowId = row.id;


      // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      // Add some text to the new cells:
      cell1.innerHTML = firstName;
      cell2.innerHTML = lastName;
      cell3.innerHTML = human+ rowId.toString();
       id++;
    }
  </script>][1]

这是我的表格声明

<div class="container">
 <table class="table table-bordered" id="saving_table">
    <caption>Classmates</caption>
    <thead>
      <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Human or Vampire?</th>
      </tr>
    </thead>
  </table>
  <button class="btn btn-primary" onclick="insert_row()">Submit</button>

和我的输出图像只是包含：

javascript html5
4个回答
1
投票

基本上你只需要在函数之外移动id变量。这样，当你的代码加载时，它只被设置为1，然后每个函数调用都会增加它。

// global
var id = 1;

function insert_row() {
  // ...

演示

// global
var id = 1;

function insert_row() {
  var firstName = document.getElementById('first_name').value;
  var lastName = document.getElementById('last_name').value;
  var human = "human";

  var table = document.getElementById("saving_table");

  // Create an empty <tr> element and add it to the 1st position of the table:
  var row = table.insertRow(1);
  row.id = id;
  var rowId = row.id;


  // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  // Add some text to the new cells:
  cell1.innerHTML = firstName;
  cell2.innerHTML = lastName;
  cell3.innerHTML = human + rowId.toString();
  id++;
}
<div class="container">
 <table class="table table-bordered" id="saving_table">
    <caption>Classmates</caption>
    <thead>
      <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Human or Vampire?</th>
      </tr>
    </thead>
  </table>
  <input id="first_name" />
  <input id="last_name" />
  <button class="btn btn-primary" onclick="insert_row()">Submit</button>
</div>
0
投票

由于在每个函数调用中初始化了id变量，因此所有行最终都具有相同的id（即1）。 解决这个问题的方法之一是简单地将var id = 1;声明放在function insert_row()开始之前作为全局变量。 但是，为了避免使用全局变量，我们可以获取表的所有现有行的计数，并为其添加1以按以下方式获取新ID：

[<script type="text/javascript">
function insert_row(){
  var firstName = document.getElementById('first_name').value;
  var lastName = document.getElementById('last_name').value;
  var human = "human";

  var table = document.getElementById("saving_table");

  // get count of the number of rows that already exist
  var rowCount = table.getElementsByTagName("tr").length;
  var id = rowCount + 1;

  // Create an empty <tr> element and add it to the 1st position of the table:
  var row = table.insertRow(id);
  row.id=id;
  var rowId = row.id;


  // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  // Add some text to the new cells:
  cell1.innerHTML = firstName;
  cell2.innerHTML = lastName;
  cell3.innerHTML = human+ rowId.toString();
   id++;
}

][1]

HTML代码将保持不变。如果您的应用程序很大或正在成为一个大项目，我强烈建议使用第二种方法而不是定义全局变量。随着应用程序规模的增长，全局变量往往难以管理。

0
投票

请更好地编写代码：1）为每个新行增加insertRow 2）不要为每个调用重复所有document.getElementById 3）不要将HTML代码与JS混合（onclick =“insert_row（）”）4）如果你用THEAD做了一个TABLE，使用TBODY

const
  in_firstName = document.getElementById('first_name'),
  in_lastName  = document.getElementById('last_name'),
  human_str    = "human",
  tableBody    = document.querySelector('#saving_table tbody')
;
var Table_Row_ID = 0;

document.getElementById('insert-row').onclick = function()
{
  // Create an empty <tr> element and add it to the 1st position of the table:
  let row = tableBody.insertRow(Table_Row_ID);
  row.id  = ++Table_Row_ID;

  // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
  let
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2)
  ;

  // Add some text to the new cells:
  cell1.textContent = in_firstName.value;
  cell2.textContent = in_lastName.value;
  cell3.textContent = human_str + row.id;
}
<div class="container">
  <table class="table table-bordered" id="saving_table">
      <caption>Classmates</caption>
      <thead>
        <tr>
          <th>FirstName</th>
          <th>LastName</th>
          <th>Human or Vampire?</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
</div>
<div class="container">
  <input type="text" id="first_name" placeholder="first_name"   /> 
  <input type="text" id="last_name" placeholder="last_name"   /> 

  <button class="btn btn-primary" id="insert-row">Add Row</button>
</div>
0
投票

在函数之外声明计数器。

演示

详情在演示中评论

// Reference tags
var btn = document.querySelector('button');
var first = document.getElementById('firstName');
var last = document.getElementById('lastName');
var spec = document.getElementById('species');
// Declare counter
var i = 0;

function insert_row(e) {
  // Reference <tbody> (Not <table>)
  var table = document.querySelector("tbody");
  // Insert <tr> (No index is needed)
  var row = table.insertRow();
  // Add ID to <tr>
  row.id = 'r' + i;
  // for every loop...
  for (let c = 0; c < 3; c++) {
    // ...insert a <td>...
    var cell = row.insertCell(c);
    // ...1st loop add the value of first name input as text...
    if (c === 0) {
      cell.textContent = first.value;
      // ...2nd loop add the value of last name input as text...
    } else if (c === 1) {
      cell.textContent = last.value;
      // ...3rd loop add the value of species select as text...
    } else if (c === 2) {
      cell.textContent = spec.value;
      // ...otherwise just end loop
    } else {
      break;
    }
  }
  // Increment counter
  i++;
}
// Add click event handler to button
btn.onclick = insert_row;
table {
  table-layout: fixed;
  width: 75%;
  margin: 10px auto;
}

th {
  width: 33%
}

td {
  text-align: center
}

caption {
  font-size: 1.2rem;
  font-weight: 900;
}

input,
select,
button {
  display: inline-block;
  font: inherit;
  height: 3ex;
  line-height: 3ex;
  vertical-align: middle;
}

select,
button {
  height: 4ex;
}

button {
  float: right
}
<div class="container">
  <table class="table table-bordered" id="saving_table">
    <caption>Classmates</caption>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Species</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <input id='firstName' placeholder='First'>
  <input id='lastName' placeholder='Last'>
  <select id='species'>
    <option value=''>Species</option>
    <option value='Human &#128373;'>Human &#128373;</option>
    <option value='Vampire &#129499;'>Vampire &#129499;</option>
  </select>
  <button class="btn btn-primary">Submit</button>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.