如何在 Javascript 中调用字符串元素及其索引？

Question

我正在尝试创建显示名称数组的 table。

因此 table 将包含单元格，一个用于索引编号，另一个用于其名称。

将名字压入数组时，数组不显示我压入的所有元素的问题。

我按.getElementById().value push name 的数组不return as

var ex_array = ['name1', 'name2',..],

但是显示是这样的

var ex_array = ['n', 'a', 'm', 'e', '1', 'n', 'a', 'm', 'e', '2',...]

我尝试的方法是通过

获取元素

var ex_array[0] = "name1"

var ex_array[1] = "name2"

为

创建单元格

这是代码。

namelist = [];

function push_name_list() {
  var name = document.getElementById('name').value;

  namelist.push(name);
  var total = parseInt(namelist.length, 10);

  var newnamelist = "";
  
  for(var i=0; i < namelist.length; i++) {
    newnamelist = newnamelist + namelist[i] + "<br/>";
  }

  document.getElementById('array').innerHTML = newnamelist;
  
  document.getElementById('total').innerHTML = total;
}

  <body>
    <h1>Create Name List</h1>
    <!--Push name into the list.-->
    <span>Write a name.</span>
    <br/>
    <input type="text" id="name"/>
    <button onclick="push_name_list();">add</button>    

    <!--show elements in the array on the table.-->
    <table border="1" id="table" width = '200px'>
      <thead width ='100%'>
        <tr>
          <th colspan="2">
            Name List
          </th>
        </tr>
      </thead>
      <tbody id="tableshow">
        <tr>
          <th id="number"></th>
          <td id="array"></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="1" width ='30%'>
            total number of names :
          </th>
          <td id='total' width ='70%' margin ='auto'>
            actual total number
          </td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Answer 1

你所要做的就是将namelist[i] + "<br/>"替换为"<tr><th>"+(i+1)+"</th><th>"+namelist[i]+"</th></tr>";

namelist = [];

function push_name_list() {
  var name = document.getElementById('name').value;

  namelist.push(name);
  var total = parseInt(namelist.length, 10);

  var newnamelist = "";
  
  for(var i=0; i < namelist.length; i++) {
    newnamelist = newnamelist + "<tr><th>"+(i+1)+"</th><th>"+namelist[i]+"</th></tr>";
  }

  document.getElementById('tableshow').innerHTML = newnamelist;
  
  document.getElementById('total').innerHTML = total;
}

function createRow(index, value){
  return "<tr><td>"+index+"</td><td>"+value+"</td></tr>";
}

<body>
    <h1>Create Name List</h1>
    <!--Push name into the list.-->
    <span>Write a name.</span>
    <br/>
    <input type="text" id="name"/>
    <button onclick="push_name_list();">add</button>    

    <!--show elements in the array on the table.-->
    <table border="1" id="table" width = '200px'>
      <thead width ='100%'>
        <tr>
          <th colspan="2">
            Name List
          </th>
        </tr>
      </thead>
      <tbody id="tableshow">
      
      </tbody>
      <tfoot>
        <tr>
          <th colspan="1" width ='30%'>
            total number of names :
          </th>
          <td id='total' width ='70%' margin ='auto'>
            actual total number
          </td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Answer 2

尝试使用indexOf() 函数获取元素的索引。我重写了你的函数，希望对你有帮助。

namelist = [];

function push_name_list() {
  var name = document.getElementById('name').value;

  namelist.push(name);
  var total = parseInt(namelist.length, 10);

  document.getElementById('total').innerHTML = total;

    document.getElementById('tableshow').insertAdjacentHTML('beforeend', '<tr><th id="number">' + namelist.indexOf(name) +'</th><td id="array">' + name + '</td</tr>');

}

如何在 Javascript 中调用字符串元素及其索引？

How to call a string element and its index in Javscript?

javascript

string

indexing

element