如何制作响应式html表格字段,这些字段由html表单中的用户输入自动填写?

时间:2018-06-04 10:09:39

标签: javascript html css

我已设法响应我的 html输入文字字段,这些字段位于 html格式中。

我的新问题是这些字段的值会添加到 html表格(当我按下"添加"按钮)时各自的字段中相同网页中的html表单。

有谁知道我怎么能那些()字段的响应?



<h2><b>Λίστα Προϊόντων</b></h2>																																<!-- We set the heading of the HTML Table. -->
			<div>													
				<table style="width:100%;">																								
					<thead>																																				<!-- We group the "header" content in the HTML Table. -->
						<tr>																																			<!-- The "header" content of the HTML Table is not repeated. -->																											
							<th>Κατηγορία</th>
							<th>Περιγραφή</th>
							<th>Λεπτομέρειες</th>
							<th>Τιμή (€)</th>
							<th></th>
						</tr>
					</thead>
					<tbody ng-repeat="x in product track by $index">																									<!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
						<tr>																																			<!-- Each row of the HTML Table consists of 4 HTML fields and 1 button. -->													
							<td><input type="text" value="{{x.Category}}" /></td>						
							<td><input type="text" value="{{x.Description}}" /></td>
							<td><input type="text" value="{{x.Details}}" /></td>	
							<td><input type="number" value="{{x.Price}}" /></td>
							<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td>															<!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
						</tr>
					</tbody>
				</table>
			</div>
			<hr>																																						<!-- We separate the HTML content of the page. -->
			<div>
				<h2><b>Καταχώρησε νέο προϊόν</b></h2>																													<!-- We set the heading of the HTML Form. -->
				<div class="row">																																		<!-- We set the "1st row" of the HTML Form. -->	
					<div class="col-md-6">																																<!-- We use "md" for "medium" screen devices of width "equal to or greater than" 992px and "6" for adding 6 columns. -->															
						<div class="form-group">																														<!-- We use "form-group" for optimum spacing. -->
							<label class="control-label" for="category">Κατηγορία</label>
							<div class="controls">
								<input id="category" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" ng-model="Category" />			<!-- When the value of the input field "Κατηγορία" changes, is bound to the created variable "Category" in AngularJS by the "ng-model" directive. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">																								
						<div class="form-group">
							<label class="control-label" for="description">Περιγραφή</label>
							<div class="controls">
								<input id="description" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" ng-model="Description" />		<!-- When the value of the input field "Περιγραφή" changes, is bound to the created variable "Description" in AngularJS by the "ng-model" directive. -->	
							</div>
						</div>
					</div>
				</div>
				<div class="row">																																		<!-- We set the "2nd row" of the HTML Form. -->
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="details">Λεπτομέρειες</label>
							<div class="controls">
								<input id="details"
							   		   type="file"
							   		   cam-variable-name="Details"
							           cam-variable-type="File"
							           cam-max-filesize="10000000" ng-model="Details" />																				<!-- When the value of the input field "Λεπτομέρειες" changes, is bound to the created variable "Details" in AngularJS by the "ng-model" directive. -->
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label" for="price">Τιμή (€)</label>
							<div class="controls">
								<input id="price" type="number" min="0" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" ng-model="Price" />		<!-- When the value of the input field "Τιμή (€)" changes, is bound to the created variable "Price" in AngularJS by the "ng-model" directive. -->
							</div>
						</div>
					</div>
				</div>
				<div class="row">																																		<!-- We set the "3rd row" of the HTML Form. -->
					<div class="col-md-4">																																<!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
						<div class="controls">
							<input type="button" ng-click="addProduct()" ng-show="isAddFormValid()" value="Add" />														<!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" function (expression) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the function named "addProduct()" when this button is clicked. -->
						</div>
					</div>
				</div>
			</div>
&#13;
&#13;
&#13;

谢谢, 史蒂夫

1 个答案:

答案 0 :(得分:-1)

你可以尝试这种方法,它对我有用。

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Adjust width of input field to its input