如何获取JavaScript创建的动态表格输入值并实现打印、随机输出

前置bug修复 #

你现有代码生成输入框时使用了重复的id="one"、id="two"，DOM规范要求id必须唯一，会导致后续无法正确取值，需要先修改makingtable函数的输入框生成逻辑：

function makingtable(a1) {
  var b1 = parseInt(a1);
  num = b1;
  // 每次生成新表格前重置tag，避免多次点击重复拼接
  tag = "<table id='dytable'>";
  for (var j = 1; j <= b1; j++) {
    tag += "<tr>"
    tag += "<td class = 'autoInc'>";
    // 给id加上行号，保证唯一
    tag += `<input type = 'text' id='one_${j}'>`;
    tag += "</td>";
    tag += "<td class = 'autoInc'>";
    tag += `<input type = 'text' id='two_${j}'>`;
    tag += "</td>";
    tag += "</tr>";
  }
  tag += "</table>";
  area.innerHTML = tag;
}

printingTable函数补全 #

问号位置可直接通过唯一id取值填入新表格，代码如下：

function printingTable() {
  var tag1 = "<table border='1'>";
  for (i = 1; i <= num; i++) {
    tag1 += "<tr>";
    for (j = 0; j <= 1; j++) {
      tag1 += "<td>";
      // 问号位置补全代码
      const inputId = j === 0 ? `one_${i}` : `two_${i}`;
      tag1 += document.getElementById(inputId).value;
      tag1 += "</td>";
    }
    tag1 += "</tr>";
  }
  tag1 += "</table>";
  area1.innerHTML = tag1;
}

存储值+随机输出实现方案 #

实现思路 #

1. 新增全局数组存储所有输入的表格数据
2. 取值时先遍历所有输入框，将每行的两列值存入二维数组
3. 用Fisher-Yates洗牌算法打乱数组，再渲染成表格即可实现随机输出

完整实现代码 #

var num;
var tag = "<table id='dytable'>";
// 新增全局存储数组
var tableData = [];

function makingtable(a1) {
  var b1 = parseInt(a1);
  num = b1;
  tag = "<table id='dytable'>";
  for (var j = 1; j <= b1; j++) {
    tag += "<tr>"
    tag += "<td class = 'autoInc'>";
    tag += `<input type = 'text' id='one_${j}'>`;
    tag += "</td>";
    tag += "<td class = 'autoInc'>";
    tag += `<input type = 'text' id='two_${j}'>`;
    tag += "</td>";
    tag += "</tr>";
  }
  tag += "</table>";
  area.innerHTML = tag;
}

// 新增数据收集函数
function collectData() {
  tableData = [];
  for(let i=1; i<=num; i++) {
    const col1 = document.getElementById(`one_${i}`).value;
    const col2 = document.getElementById(`two_${i}`).value;
    tableData.push([col1, col2]);
  }
}

// 新增数组打乱函数
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

// 打印/随机打印函数
function printingTable(isRandom = false) {
  collectData();
  // 随机输出则打乱数组
  const renderData = isRandom ? shuffleArray([...tableData]) : tableData;
  var tag1 = "<table border='1'>";
  renderData.forEach(row => {
    tag1 += "<tr>";
    row.forEach(val => {
      tag1 += `<td>${val}</td>`;
    })
    tag1 += "</tr>";
  })
  tag1 += "</table>";
  area1.innerHTML = tag1;
}

如果需要触发随机输出，可在HTML新增按钮：

<button onclick="printingTable(true)">随机打印</button>

内容的提问来源于stack exchange，提问作者Minju Kang