Question

我有三个对话框，一个用于输入名称，输入姓氏和输入点。我正在尝试制作一个程序，该程序将自动将我的输入内容放在同一页的新表中。因此，当我输入名称程序时，会自动在表格上放置名称，名称和点数相同。在表中，我有“要求”列。如果用户输入“要求”列中的点数超过35，则需要自动打印“是”，或者如果用户输入的内容较低，则需要打印35点“否”。

这是我的工作方式，我创建了表格和三个输入对话框，但是这种带有自动打印和检查点的功能进行得并不顺利：

<form>
 Name: <input type="text" id="name"/><br/>
 Last name: <input type="text" id="last"/><br/>
 Points: <input type="number" id="age"/><br/>
 <button type="submit">Submit</button><br></form>
 <div id="a"></div>
 </form>

<table>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}
</style>
<tr>
<th>Name</th>
<th>Last name</th>
<th>Points</th>
<th>Requirements</th>
</tr>

我尝试过：

$("th i ").click(function () {
var index = $(this).parent().index();
$("tr").each(function () {
$(this).find("input").val($(this).find("td:eq(" + index + ") input").val());
$(this).find("select").val($(this).find("td:eq(" + index + ") 
select").val())
})
})

Answer 1

完成此操作的最佳方法是使用.js文件...制作一个.js文件，并使用<script src="name.js" type="module"></script>将其包含在html中

在该name.js文件中，您需要使用 querySelector 或 getElementById ...来查找元素...

const inputName=document.getElementById("name");
const inputLast=document.getElementById("last");
const inputPts=document.getElementById("age");
const buttonName=documen.getElementById("btn");

buttonName.onclick=(ev)=>createTable(ev.target);

function createTable(buttonName)
{

const getTable=document.querySelector("table");
//create table here <trow><th>...</th></trow>
//create table here <trow><td>...</td></trow>

//find a div with id="a" 

const getDiv=document.getElementById("a");
if(inputPts.value>35)
{
getDiv.innerHTML="YES";
}
else
{
getDiv.innerHTML="NO";
}

}

如何在表格中自动添加信息

1 个答案: