Question

我必须将用户定义的数组数据打印到表中。一旦用户单击添加按钮。我可以将数据打印出表格。但我想在桌子内打印它。

这是我的代码：

var data = new Array(); // blank array declaration

function check_info() {
    var text = document.getElementById("enter").value;
    var txtage = document.getElementById("age").value;

    if (text == "" || txtage == "") {
        console.log("Check Function load");
        alert('Please fill the Field');
        return false;
    } else {
        return display();
    }
}

function display() {
    var str1 = document.getElementById("enter").value;
    var str2 = document.getElementById("age").value;

    document.getElementById('enter').value = '';
    document.getElementById('age').value = '';

    if ((str1 == "" || str1.length == 0) && (str2 == "" || str2.length == 0)) {
        return false;
    }
    data.push(str1);
    data.push(str2);
    document.getElementById("str1").children[0].innerHTML += "<li>" + data[data.length - 1] + "</li>";
    document.getElementById("str2").children[1].innerHTML += "<li>" + data[data.length - 1] + "</li>"

}

<html>
<body>
  <lable>Enter name : </lable> <input type="text" id="enter" required/>
  <lable>Enter age : </lable> <input type="text" id="age" required/> <input type="button" value="Add" onclick="check_info()">
  <div id='str'>
    <ol></ol>
  </div>
  <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
    <thead>
      <tr>
        <th> Name</th>
        <th> Age</th>
        <th> Action</th>
      </tr>
    </thead>
  </table>
</body>

</html>

我想在表格内打印数据。谁能告诉我问题出在什么地方？

Answer 1

代码中的错误是由于引用ID不正确，您正在将数据插入错误的元素中。另外，您应该练习将表行插入<tbody>元素内。最后，除非有其他原因要使用该数组，否则不需要它。

此外，您应该考虑使用类似jQuery的JS库。您的代码将比普通JS更简单，更干净。

let tableArray = [];

function check_info() {
  var text = document.getElementById("name").value;
  var txtage = document.getElementById("age").value;

  if (text == "" || txtage == "") {
    console.log("Check Function load");
    alert('Please fill the Field');
    return false;
  } else {
    return display();
  }
}

function display() {
  var str1 = document.getElementById("name").value;
  var str2 = document.getElementById("age").value;
  var tbodyElem = document.getElementById("tbody");

  document.getElementById('name').value = '';
  document.getElementById('age').value = '';

  if ((str1 == "" || str1.length == 0) && (str2 == "" || str2.length == 0)) {
    return false;
  }
  
  tableArray.push([[str1], [str2]]);
  tbodyElem.innerHTML += `<tr><td>${str1}</td><td>${str2}</td><td></td></tr>`
  console.log(tableArray);
}

<html>

<body>
  <lable>Enter name : </lable> <input type="text" id="name" required/>
  <lable>Enter age : </lable> <input type="text" id="age" required/> <input type="button" value="Add" onclick="check_info()">
  <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
    <thead>
      <tr>
        <th> Name</th>
        <th> Age</th>
        <th> Action</th>
      </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</body>

</html>

Answer 2

您可以尝试使代码保持DRY并保持干净，而无需使用任何重载的库...您还应该考虑从表中删除cellspacing和cellpadding属性，因为在html5中已弃用了cellpacing和cellpadding属性，而使用CSS来设置表的样式。 / p>

var data = [];
function check_info()
{
    // without the trim function a user can easily 
    // bypass this typing just whitespaces. 
    // do you really want the age to be any character? 
    var enter = document.getElementById("enter").value.trim();
    var age = document.getElementById("age").value.trim();

    if (enter == "" || age == "")
    {
        console.log("Check Function load");
        alert('Please fill the Field');
        return false;
    }
    else
    {
        // If there is no need to call the display function elsewhere, 
        // you can just paste its code directly here to prevent
        // unnecessary function call
        return display(enter, age);
    }
}


function display(enter, age)
{
    data.push(enter, age);
    document.getElementById("data_table").innerHTML += "<tr><td>" + enter + "</td><td>" + age + "</td> <td></td></tr>";

}

我必须将数组数据打印到表中

2 个答案: