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

【问题标题】：How to call a string element and its index in Javscript?如何在 Javascript 中调用字符串元素及其索引？
【发布时间】：2020-01-19 13:29:16
【问题描述】：

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

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

名称被推入数组时的问题，数组并没有显示我推入的所有元素。

我通过.getElementById().value 推送名称的数组不返回为

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>

【问题讨论】：

你的代码对我来说很完美。
你的意思是你的变量名列表有误吗？对我来说效果很好？
那么 ex_array 与那个工作的 sn-p 有什么关系呢？在 sn-p 中没有使用它。

标签： javascript string indexing element

【解决方案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>

【讨论】：

【解决方案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>');

}

【讨论】：

天哪，我在运行您的代码后简直尖叫。感谢您的教导。