Question

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
  <form >

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit"  onclick="doFunction();">
  </form>
  </div>
  <table style="width:100%"  id = "myTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>country</th>
  </tr>
    <style>

    input[type=text], select, textarea {
        width: 100%; /* Full width */
        padding: 12px; /* Some padding */
        border: 1px solid #ccc; /* Gray border */
        border-radius: 4px; /* Rounded borders */
        box-sizing: border-box; /* Make sure that padding and width stays in place */
        margin-top: 6px; /* Add a top margin */
        margin-bottom: 16px; /* Bottom margin */
        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }

    /* Style the submit button with a specific background color etc */
    input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
        background-color: #45a049;
    }

    /* Add a background color and some padding around the form */
    .container {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
    }
</style>
<script>
function doFunction(){
  var value = document.getElementById("fname").select();
  var lastname = document.getElementById("lname").select();
  var  country = document.getElementById("Country").select();
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 =  row.insertCell(1);
  var cell3 =  row.insertCell(2);
  cell1.innerHTML = "value";
  cell2.innerHTML = "lastname";
  cell3. innerHTML = "country";
}
  </script>



</body>

当用户将数据输入文本框并点击数据应添加到我们在html页面中创建的表格中的提交按钮时，我们将显示空文本框我在java脚本中使用select by id标签并插入row方法以在javascript中动态地将元素添加到表中我试过，但我没有得到所需的输出提前谢谢

Answer 1

您的代码存在这些问题。

您忘记关闭table代码
您需要使用.value而不是.select()来获取输入字段的值
您需要将存储在变量中的获取值传递给单元格的innerHTML，而不是硬编码字符串
如果您不希望重新加载该页面，则需要将event.preventDefault()添加到submit event listener
getElementById('Country')应为getElementById('country')

我已将thead和tbody添加到您的html中，以便您可以直接插入表体而不是表，并将该表更改为 var table = document.querySelector("#myTable tbody");

＆＃13;

function doFunction(){
  var value = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;
  var country = document.getElementById("country").value;
  var table = document.querySelector("#myTable tbody");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 =  row.insertCell(1);
  var cell3 =  row.insertCell(2);
  cell1.innerHTML = value;
  cell2.innerHTML = lastname;
  cell3.innerHTML = country;
}

const submit = document.querySelector('#submitBtn');
submit.addEventListener('click', event => {
  event.preventDefault();
  doFunction();
});

＆＃13;

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

＆＃13;

  <div class="container">
  <form >

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit" id="submitBtn">
  </form>
  </div>
  <table style="width:100%"  id = "myTable">
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>country</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>

＆＃13;

在javascript中动态地将用户输入字段中的数据添加到表中

1 个答案: