刚开始学习 JavaScript 和 HTML5 获取文凭，我目前在尝试弄清楚如何 对齐方面遇到了一些麻烦表单中的 输入 ，以便 对齐 以及 标签 。
还试图避免使用任何 CSS 。
对收到的任何建议或意见表示感谢。
var formStyle=document.getElementById("formStyle");//creates variable and links it to the form
formStyle.style.fontFamily="Arial";//sets font for within the form
formStyle.style.borderStyle = "outset";//gives border that procedes to make the form look 3D
formStyle.style.padding = "10px";//sets padding within form
formStyle.style.width = "350px";//sets form width
formStyle.style.backgroundColor="lightblue";//changes background colour of form
function changeBgd(textField)
{
textField.style.background="lightgrey";//when text field is selected it will change colour to represent it has been selected by the user
}
function resetBgd(textField)
{
textField.style.background="";//resets currently selected text field to original colour when deselected
}
function buttonHelp()
{
window.open("\helpassignment.html");//opens help page in seperate tab
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
4JSB Assignment
</title>
</head>
<body onload="styleBody()">
<div class="container">
<center> <!--aligns form to centre of page-->
<form name="donationform" id="formStyle" onsubmit="validateDonation()"/>
<label id="labels">First Name:</label>
<input id="inputs" type="text" name="firstname" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Last Name:</label>
<input id="inputs" type="text" name="lastname" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Email Address:</label>
<input id="inputs" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z].{2,4}$" onfocus="changeBgd(this)" onblur="resetBgd(this)" required /><br/><br/>
<label id="labels">Postcode:</label>
<input id="inputs" type="text" name="postcode" pattern="[0-9]{4}" maxlength="4" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Donation:</label>
<input id="inputs" type="text" name="donationamount" value="$0" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Credit Card:</label>
<select id="inputs">
<option value="0">Visa</option>
<option value="1">MasterCard</option>
<option value="2">American Express</option>
</select><br/><br/>
<label id="labels">Card Number:</label>
<input id="inputs" type="text" name="cardnum" pattern="[0-9]{16}" maxlength="16" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">CCV:</label>
<input id="inputs" type="text" name="ccv" pattern="[0-9]{3}" maxlength="3" onfocus="changeBgd(this)" onblur="resetBgd(this)" required/><br/><br/>
<label id="labels">Expiry Date:</label>
<select id="inputs">
<option value="0">Select Month</option>
<option value="1">January</option>
<option value="2">Feburary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="inputs">
<option value="0">Select Year</option>
<option value="1">2017</option>
<option value="2">2018</option>
<option value="3">2019</option>
<option value="4">2020</option>
<option value="5">2021</option>
<option value="6">2022</option>
</select><br/><br/>
<input type="button" onclick="buttonHelp()" value="Help"> <!--provides link to help page-->
<input type="submit" name="submit" value="Submit">
<input type="reset"><!--provides reset button for user to clear form-->
</form>
</center>
</div>
<script src="..\js\assignment.js">
</script>
</body>
</html>
答案 0 :(得分：0)
对于每个元素的更改att使用此（使用 javascript （ jquery ））：
da.getMatchHistory(options).then((result) => {
console.log(result);
}, (errorResponseStatusText) => {
console.log(errorResponseStatusText);
});
答案 1 :(得分：0)
你可以设置一个新的att调用 var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);
function addRow(){
event.preventDefault();
var newData= document.getElementById("inputname").value;
var newLevel = document.getElementById("inputlevel").value;
console.log("new data "+newData);
console.log("new level "+newLevel);
var table = document.getElementById("mytable");
var tableLength = (table.rows.length)-1;
console.log("table lenght: "+tableLength);
var htmltext= "<tr id= 'row"+tableLength+"'> <td id='inputname"+tableLength+"'>"+newData+"</td> \
<td id='inputlevel"+tableLength+"'>"+newLevel+"</td>\
<td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \
<input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \
<input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\
</td>\
</tr>";
table.insertRow(tableLength).innerHTML=htmltext;
}//end addRow
使用如下：
<html>
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="text" id="inputname"></td>
<td>
<select name="levels-list" id="inputlevel">
<option value="High" id="option-1">High</option>
<option value="Mid" id="option-2">Mid</option>
<option value="Low" id="option-3">Low</option>
</select>
</td>
<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>
</tbody>
</table>
</div>
<!-- <button onclick='display()'> Display</button> -->
<script src="get-text.js"></script>
</body>
</html>
现在它会有一个名字＆＃39;在现场，当用户点击它时，它就会消失。