Разделение Javascript-переменной в HTML-таблицу - PullRequest
Новая
       9

Разделение Javascript-переменной в HTML-таблицу

0 голосов
/ 31 мая 2018

Я не могу разделить переменную, которая содержит 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>

Ответы [ 4 ]

0 голосов
/ 01 июня 2018

Проблема в том, что вы объединяете каждое поле в строку;в строке нет разделителя, поэтому нет логического способа его разбить.Вместо этого вы хотите сохранить каждое поле в массиве , затем вы можете выполнить итерацию по нему, чтобы создать строку 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>

Дополнительные ресурсы

0 голосов
/ 31 мая 2018

Если вы хотите, чтобы данные были в разных столбцах, вам нужно создать столбцы и добавить их в строку.

Вы не хотите объединять данные в одну переменную, поскольку хотите сохранитьданные разбиты на столбцы.

Вы можете сделать это: 

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);
    }
}
0 голосов
/ 01 июня 2018

Использовали следующие методы, свойства и API:

HTMLFormControlsCollection

Array.from()

forEach()

.insertCell()

.textContent

Демо

Подробности комментируются в Демо 

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>
0 голосов
/ 31 мая 2018

Вам нужно добавить разметку ячейки таблицы к вашей строке, учитывая ваш текущий подход. 

<!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>
...