JavaScript和HTML格式-表需要调用变量

JavaScript and HTML Formatting - Table Needs to Call Variable

本文关键字：调用 变量 HTML 格式 JavaScript      更新时间：2023-09-26

我是一名高中生，正在尝试制作校样写作程序。我只需要JS函数Edit（）将第一个文本框的值发送到表中。有什么想法吗？我知道代码很乱，我稍后会修复它。

代码：

<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
    <form id='user-input'>
        <input type='text' id='given' placeholder='Given Information'></input>
    </form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
    <form id='user-input'>
        <input type='text' id='prove' placeholder='Statement to Prove'></input>
    </form>
<button id='Submit' Value='Edit' onClick="edit()">Submit</button>
<script>
  function edit()
{
       var x = document.getElementById('given').value;
       var y = document.getElementById('prove').value;
       document.getElementById('Test').innerHTML.value=var x
}
</script>
<br>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
  <tr>
    <th>Step Number</th>
    <th>Step</th>       
    <th>Explaination</th>
  </tr>
  <tr>
    <td>1</td>
    <td id='Test'></td>     
    <td>Given</td>
</table>
</div>
</body>
</html>

您可以使用textContent而不是var关键字来读取x值。→document.getElementById('Test').textContent=x;

<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
    <form id='user-input'>
        <input type='text' id='given' placeholder='Given Information'></input>
    </form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
    <form id='user-input'>
        <input type='text' id='prove' placeholder='Statement to Prove'></input>
    </form>
<button id='Submit' Value='Edit' onClick="edit()">Submit</button>
<script>
  function edit()
{
       var x = document.getElementById('given').value;
       var y = document.getElementById('prove').value;
       document.getElementById('Test').textContent=x;
}
</script>
<br>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
  <tr>
    <th>Step Number</th>
    <th>Step</th>       
    <th>Explaination</th>
  </tr>
  <tr>
    <td>1</td>
    <td id='Test'></td>     
    <td>Given</td>
</table>
</div>
</body>
</html>

！只需在第一个输入中添加onChange="edit（）"，并对测试函数进行一些更改。

<input type='text' id='given' placeholder='Given Information' onChange="edit()"></input>

和

function edit(){
   var x = document.getElementById('given').value;
   var y = document.getElementById('prove').value;
   document.getElementById('Test').innerHTML = x;}

var x用于声明变量。并且您不需要编辑innerHTML.value（我认为这根本不存在）。您只需编辑innerHTML

所以，更换

document.getElementById('Test').innerHTML.value=var x

带有

document.getElementById('Test').innerHTML = x

我不确定你想做什么，但这会更好：document.getElementById（'Test'）.innerHTML=x；

因此，如果您只想修改DOM并插入值，我建议您使用：

insertRow()和insertCell()方法

这个建议是基于w3schools的例子，这里有一个特定的jsfiddle用于您的案例。

的定义和用法

insertRow（）方法创建一个空元素并将其添加到表中。

insertRow（）方法在表中指定的索引处插入新行。

注意：一个元素必须包含一个或多个或元素。

提示：使用deleteRow（）方法删除一行。

例如，一个简单的测试是：

function edit() {
  var table = document.getElementById("myTable");   
  var row = table.insertRow(2);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);    
  var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("given").value;
  cell2.innerHTML = document.getElementById("prove").value;
  cell3.innerHTML = cell1.innerHTML + cell2.innerHTML
}

希望这能有所帮助！

相关文章：