javascript - 如何在输入文本字段 HTML 中添加序列号

标签 javascript html dom

如何在下面的HTML输入文本框中添加序列号。

每当用户单击生成表按钮时,输入框中应显示序列号 像1、2、3 任何解决方案

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName('body')[0];

  // creates a <table> element and a <tbody> element
  var tbl = document.createElement('table');
  var tblBody = document.createElement('tbody');

  // creating all cells
  for (var i = 0; i < 1; i++) {
    var seqnumber = 1;
    var seq = +1;
    // creates a table row
    
    var row2 = document.createElement('tr');

    

    //====== table first row data =======//
    var seq = document.createElement('td');
    var seqText = document.createTextNode('Seq');
    var l = document.createElement('td');
    var seqText1 = document.createElement('input');

   

    //===== seq generator =====//
    seq.appendChild(seqText);
    row2.appendChild(seq);
    l.appendChild(seqText1);
    row2.appendChild(l);

   

    // add the row to the end of the table body
    tblBody.appendChild(row2);
  
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute('border', '2');
}
<input type="button" value="Generate a table." onclick="generate_table()" />

我的jsfiddle链接:https://jsfiddle.net/shreekantbatale2/bdwLuhgs/5/

最佳答案

我刚刚使用了一个 counter 变量,这就是您所需要的?

var counter = 0;

function generate_table() {
  counter++;

  // get the reference for the body
  var body = document.getElementsByTagName('body')[0];

  // creates a <table> element and a <tbody> element
  var tbl = document.createElement('table');
  var tblBody = document.createElement('tbody');

  // creating all cells
  for (var i = 0; i < 1; i++) {
    var seqnumber = 1;
    var seq = +1;
    // creates a table row
    
    var row2 = document.createElement('tr');

    

    //====== table first row data =======//
    var seq = document.createElement('td');
    var seqText = document.createTextNode('Seq');
    var l = document.createElement('td');
    var seqText1 = document.createElement('input');
	seqText1.value = counter;
   

    //===== seq generator =====//
    seq.appendChild(seqText);
    row2.appendChild(seq);
    l.appendChild(seqText1);
    row2.appendChild(l);

   

    // add the row to the end of the table body
    tblBody.appendChild(row2);
  
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute('border', '2');
}
<input type="button" value="Generate a table." onclick="generate_table()" />

关于javascript - 如何在输入文本字段 HTML 中添加序列号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61350597/

相关文章:

javascript - 在 javascript (node js) 中解释 16 位二进制补码

javascript - DOM 级别有何不同,它们之间如何相互关联?

javascript - 将鼠标悬停在 flot 中的某个点上时显示自定义工具提示

javascript - 重新调查 "Trying to make different HTML paragraph show depending on selection"

javascript - 如何在 jquery 中传递带参数的命名函数而不是匿名函数?

javascript - jQuery - 将 <body> 调整为页面宽度。 (缩放有效,我怎样才能让它也缩小?)

php - 如何将数据库的值显示到组合框?

html - 背景样式中的引用?

dom - jQuery 实时处理就绪或加载事件

javascript - 将 XML 插入 DOM 会导致类/id 选择器不起作用