我必须制作一个表格，我可以在其中动态添加新行。用户必须输入名字，姓氏，年龄等，然后选择一个组。根据用户的群组选择，使用＆＃34;朋友＆＃34;应该有一个特定的风格（例如绿色背景颜色），＆＃34; family＆＃34;粉红色的背景颜色等。到目前为止，我添加了一个新的行。
如何更改行样式？
function newTableRow() {
var newRow = document.createElement("tr");
var newFirst = document.createElement("td");
var newLast = document.createElement("td");
var newEmail = document.createElement("td");
var newAge = document.createElement("td");
var newDate = document.createElement("td");
var newGender = document.createElement("td");
var newGroup = document.createElement("td");
var table = document.getElementById("tab");
table.appendChild(newRow);
newRow.appendChild(newFirst);
newRow.appendChild(newLast);
newRow.appendChild(newEmail);
newRow.appendChild(newAge);
newRow.appendChild(newDate);
newRow.appendChild(newGender);
newRow.appendChild(newGroup);
newFirst.innerHTML = document.getElementById("first").value;
newLast.innerHTML = document.getElementById("last").value;
newEmail.innerHTML = document.getElementById("email").value;
newAge.innerHTML = document.getElementById("age").value;
newDate.innerHTML = document.getElementById("date").value;
newGroup.innerHTML = document.getElementById("group").value;
newGender.innerHTML = document.getElementById("gender").value;
if (document.getElementById("group").value == "family")
document.getElementById(newRow).className = "style1";
if (document.getElementById("group").value == "friend")
document.getElementById(newRow).className = "style2";
if (document.getElementById("group").value == "work")
document.getElementById(newRow).className = "style3";
}#container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
table,
th,
td {
border: solid black 1px;
border-collapse: collapse;
padding: 20px;
}
.style1 {
background-color: pink;
}
.style2 {
background-color: green;
}
.style3 {
background-color: blue;
}<div id="container">
<div id="content">
<table id="tab">
<tr>
<th> First Name </th>
<th> Last name </th>
<th> Email </th>
<th> Age </th>
<th> Date of birth</th>
<th> Gender</th>
<th> Group</th>
</tr>
<tr id="row">
<td id="first1"><input type="text" id="first"></td>
<td id="last1"><input type="text" id="last"></td>
<td id="emal1"><input type="email" id="email"></td>
<td id="age1"><input type="number" id="age"></td>
<td id="date1"><input type="date" id="date"></td>
<td id="gender1">
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="male">Male<br>
</td>
<td id="group1">
<select id="group">
<option value="family">family</option>
<option value="friend">friend</option>
<option value="work">work</option>
</select>
</td>
</tr>
</table>
<button onclick="newTableRow()">Add</button>
</div>
</div>
答案 0 :(得分：0)
如果查看开发工具的控制台，您会发现代码中存在一些语法错误。我修好了，比较你的代码和我的代码。 可以说，下面的代码正如您所期望的那样工作。
#container
{
text-align:center;
margin-left:auto;
margin-right:auto;
}
table, th,td
{
border: solid black 1px;
border-collapse: collapse;
padding:20px;
}
.style1
{
background-color:pink;
}
.style2
{
background-color:green;
}
.style3
{
background-color:blue;
}<! DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div id="container">
<div id="content" >
<table id="tab">
<tr>
<th> First Name </th>
<th> Last name </th>
<th> Email </th>
<th> Age </th>
<th> Date of birth</th>
<th> Gender</th>
<th> Group</th>
</tr>
<tr id ="row">
<td id= "first1"> <input type="text" id="first"> </td>
<td id="last1"> <input type="text" id="last"> </td>
<td id="emal1"> <input type="email" id="email"> </td>
<td id="age1"> <input type="number" id="age"> </td>
<td id="date1"> <input type="date" id="date"> </td>
<td id="gender1"> <input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="male">Male <br> </td>
<td id="group1" >
<select id="group">
<option value="family">family</option>
<option value="friend">friend</option>
<option value="work">work</option>
</select>
</td>
</tr>
</table>
<button onclick="newTableRow()">Add</button>
</div>
</div>
<script>
function newTableRow()
{
var newRow= document.createElement("tr");
var newFirst= document.createElement("td");
var newLast= document.createElement("td");
var newEmail= document.createElement("td");
var newAge= document.createElement("td");
var newDate= document.createElement("td");
var newGender= document.createElement("td");
var newGroup= document.createElement("td");
var table= document.getElementById("tab");
table.appendChild(newRow);
newRow.appendChild(newFirst);
newRow.appendChild(newLast);
newRow.appendChild(newEmail);
newRow.appendChild(newAge);
newRow.appendChild(newDate);
newRow.appendChild(newGender);
newRow.appendChild(newGroup);
newFirst.innerHTML=document.getElementById("first").value;
newLast.innerHTML=document.getElementById("last").value;
newEmail.innerHTML=document.getElementById("email").value;
newAge.innerHTML=document.getElementById("age").value;
newDate.innerHTML=document.getElementById("date").value;
newGroup.innerHTML=document.getElementById("group").value;
newGender.innerHTML=document.getElementById("gender1").value;
if(document.getElementById("group").value=="family")
newRow.className = "style1";
if(document.getElementById("group").value=="friend")
newRow.className = "style2";
if(document.getElementById("group").value=="work")
newRow.className = "style3";
}
</script>
</body>
</html>