将 Javascript 变量拆分为 html 表答案

【问题标题】：Splitting a Javascript Variable into an html table将 Javascript 变量拆分为 html 表
【发布时间】：2018-06-01 17:09:59
【问题描述】：

我无法将包含表单中 5 个字段的变量拆分为同一行的 5 个不同部分中的表。如有任何帮助，我将不胜感激。

// The section below this line is where the variable from the form input
// is inserted, but the role is not split into 5 different cells.
function getInfo() {
    var info = document.getElementById("form1");
    var text = "";
    var i;
    for (i=0; i < info.length; i++) {
        text += info.elements[i].value;
    }

    document.getElementById("data").innerHTML = text;

    // Log the form input into the console
    console.log(text);
}

div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }

<!-- JQuery styling and CDN files -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- Form HTML -->
<form id="form1">
    First name: <input type="text" name="fname" id="fname1" required><br>
    Last name: <input type="text" name="lname"  id="lname1" required><br>
    Address: <input type="text" name="address"  id="address1" required><br>
    City: <input type="text" name="city"  id="city1" required><br>
    State: <input type="text" name="state"  id="state1" required><br>

</form>
<p>Click the button below to display your entry.</p>

<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>

<table style="width:100%">
    <tr>
        <th>First Name</th>
    </tr>
        <tr id ="data">
    </tr>
</table>

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

如果您希望将数据放入不同的列，则必须创建列并将它们附加到一行。

您不想将数据连接成单个 var，因为您希望将数据分成列。

你可以这样做：

function getInfo() {
    const info = document.getElementById("form1");
    const row  = document.getElementById("data");

    for (let i =0; i < info.length; i++) {
        // Make a new column
        const col = document.createElement('td');

        // Make a new text node
        const colText = document.createTextNode(info.elements[i].value);

        // Append text to column
        col.appendChild(colText);

        // Append column to the row (id of data)
        row.appendChild(col);
    }
}

【讨论】：

【解决方案2】：

根据您当前的方法，您需要将表格单元格标记添加到您的字符串中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- Custom css -->
<style>
    div.ui-input-text { width: 200px !important;}
    button { width: 200px !important; }
</style>


<title>My Web Page</title>
</head>
<body>
<!-- Form HTML -->
<form id="form1">
    First name: <input type="text" name="fname" id="fname1" required><br>
    Last name: <input type="text" name="lname"  id="lname1" required><br>
    Address: <input type="text" name="address"  id="address1" required><br>
    City: <input type="text" name="city"  id="city1" required><br>
    State: <input type="text" name="state"  id="state1" required><br>
</form>
<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
    </tr>
 <tr id ="data">
 </tr>
</table>



<!-- Javascript function for the user input -->
<script type="text/javascript">
function getInfo() {
    var info = document.getElementById("form1");
    var text = "";
    var i;
    for (i=0; i < info.length; i++) {
        text += "<td>"+info.elements[i].value+"</td>";
    }

    document.getElementById("data").innerHTML = text;

    // Log the form input into the console
    console.log(text);
}

</script>



<p>Click the button below to display your entry.</p>

<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>



</body>
</html>

【讨论】：

【解决方案3】：

使用了以下方法、属性和 API：

HTMLFormControlsCollection

Array.from()

forEach()

.insertCell()

.textContent

演示

详情在Demo中注释

function distData(e) {
  //HTMLFormControlsCollection
  var F = document.forms.form1;
  var x = F.elements;

  //Convert Collection into an array
  var fieldArray = Array.from(x);
  console.log(fieldArray);

  //Reference tr#data
  var R = document.getElementById('data');

  //Each input in array will...
  fieldArray.forEach(function(field, index) {

    //Check if input has a value
    if (field.value.length > 0) {

      //Create a <td> snd insert it into R 
      var cell = R.insertCell(index);

      //Copy the input value into cell
      cell.textContent = field.value;
    } else {

      //if form control has no value ignore it
      console.log('field has no value');
    }

  });
  return false;
}

table {
  margin: 0 auto 20px
}

table,
td {
  border: 3px inset grey
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <style>
    div.ui-input-text {
      width: 200px
    }
    
    button {
      width: 200px
    }
  </style>
</head>

<body>

  <form id="form1">
    First name: <input type="text" name="fname" id="fname1" required><br> Last name: <input type="text" name="lname" id="lname1" required><br> Address: <input type="text" name="th>" id="address1" required><br> City: <input type="text" name="city" id="city1"
      required><br> State: <input type="text" name="state" id="state1" required><br>
    <button onclick='distData()' type='button'>DATA</button>
  </form>
  <p>Click the button below to display your entry.</p>



  <table style="width:100%">
    <tr>
      <th colspan='2'>Name</th>
      <th colspan='3'>Location</th>
    </tr>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Address</th>
      <th>City</th>
      <th>State</th>
    </tr>
    The section below this line is where the variable from the form input is inserted, but the role is not split into 5 different cells.

    <tr id="data">
    </tr>
  </table>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</body>

</html>

【讨论】：

【解决方案4】：

问题是您将每个字段连接成一个字符串；字符串中没有分隔符，因此没有合乎逻辑的方法来分解它。您想要做的是将每个字段存储在 array 中，然后您可以对其进行迭代以构建 HTML 字符串，或者更好的是使用 Array.prototype.join() 为您正在创建的单元格创建 HTML。

function getInfo() {
    var info = document.getElementById("form1");
    var fields = []; // create an empty array
    var i;
    for (i=0; i < info.length; i++) {
        fields.push(info.elements[i].value);
    }

    document.getElementById("data").innerHTML = '<td>' + fields.join('</td><td>') + '<td>';
}

document.getElementById('try-it').addEventListener('click', getInfo, false);

div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<form id="form1">
    First name: <input type="text" name="fname" id="fname1" required><br>
    Last name: <input type="text" name="lname"  id="lname1" required><br>
    Address: <input type="text" name="address"  id="address1" required><br>
    City: <input type="text" name="city"  id="city1" required><br>
    State: <input type="text" name="state"  id="state1" required><br>

</form>
<p>Click the button below to display your entry.</p>

<button id="try-it">Try it</button>

<table style="width:100%">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
    </tr>
    <tr id ="data">
    </tr>
</table>

这会起作用，但它会生成一个只能包含一行数据的表；每次您点击“尝试”时，现有数据都会被替换。要添加多行，而不是针对特定行并将单元格插入其中，而是创建一整行并将其附加到表中。由于您已经在使用 jQuery，我在下面的示例中使用它。

function getInfo() {
    // Create an array containing the values of all of the fields.
    // First, select all of the input elements inside of the form,
    // Then, use .map() to extract their values, finally use .get() to
    // turn the jQuery object into an array.
    var fields = $('#form1 input').map(function () {
      return this.value;
    }).get();

    // create a new row and append it to the table.
    $('#display-table').append('<tr><td>' + fields.join('</td><td>') + '<td></tr>');
}

// instead of using in-line event handlers, attach it in your code.
$('#try-it').on('click', getInfo);

div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<form id="form1">
    First name: <input type="text" name="fname" id="fname1" required><br>
    Last name: <input type="text" name="lname"  id="lname1" required><br>
    Address: <input type="text" name="address"  id="address1" required><br>
    City: <input type="text" name="city"  id="city1" required><br>
    State: <input type="text" name="state"  id="state1" required><br>

</form>
<p>Click the button below to display your entry.</p>

<button id="try-it">Try it</button>

<table id="display-table" style="width:100%">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
    </tr>
</table>

更多资源

【讨论】：