我有一个表，在它的列中，我希望用户单击此列内的按钮时出现弹出窗口，其中包含复选框，并且在用户选中复选框后，它将显示为具有按钮的同一列中的输出以及将所选复选框和用户名的这些值发布到数据库(PHP)。我是初学者，希望有人帮助我。
help.html代码:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
myPopup = '';
function openPopup(url) {
myPopup = window.open(url,'popupWindow','width=640,height=480');
if (!myPopup.opener)
myPopup.opener = self;
}
</SCRIPT>
</script>
</head>
<body>
<table border="1">
<tr>
<th> user name </th>
<th>product selected</th>
</tr>
<tr>
<td> <input type="text"/></td>
<td> <button onclick="openPopup('f.html')">select</button></td>
</body>
</html>
这是我的 f.html 代码:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="popupForm">
<INPUT TYPE="checkbox" >Cell phone</br>
<INPUT TYPE="checkbox" >TV</br>
<INPUT TYPE="checkbox" >Book</br>
<INPUT TYPE="BUTTON" VALUE="Submit">
</FORM>
</BODY>
最佳答案
使用 AngularJS，你可以这样做:
- 通过ajax请求从服务器获取数据。在演示中，我使用静态数据来降低复杂性。
- 创建 ng-repeat 来创建表格
- 将存储在数组中的选定数据添加到表格单元格中。
- 通过添加可在表格单元格中打开引导模式的 ng-click 或将所选数据包装在按钮中，使列表可点击。
- 在模态中使用您选择的产品创建一个包含 ng-repeat 的表单。可以使用
array.indexOf(item) !== -1测试当前项目是否被单击，如果该项目位于数组中，则返回 true。 - 每次点击复选框都会更新产品数组。
- 单击“确定”按钮后，关闭模式并通过 ajax 请求将更新的数据发布到服务器。 (检查数据是否已更改会很好。)
你也可以在没有 AngularJS 的情况下做到这一点，但我认为你必须做更多的代码才能获得这种行为。
(我对 javascript 和 AngularJS 也很陌生，所以代码并不完美，但它可以工作。)
可能有一些可以改进的地方，例如使用服务来执行 ajax 请求。
脚本中有一个错误: 取消点击未按预期工作。即使单击取消，数据也会更改。 您可以通过使用范围数据的副本来修复此问题，或者在单击取消时恢复原始数据。
演示
请找到下面的演示(它在这里不起作用，因为似乎 bootstrap.ui 使用 SO 不允许的 cookie)和 jsFiddle 。在 jsFiddle 上检查一下。就这样，它就可以工作了。
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('mainController', function($scope, $modal, $log) {
$scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk'];
// userData will be later from server with $http.get('/phpscript').success(...)
// just dummy userData here because no backend available
$scope.userData = [
{
name: 'John Doe',
selectedProducts: [
'coffee',
'beer',
'wine']
},
{
name: 'Jane Doe',
selectedProducts: [
'coffee',
'tea']
}
];
$scope.changeProducts = function(userData) {
//$scope.items = ['item1', 'item2', 'item3'];
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
//size: size,
resolve: {
user: function() {
return userData;
},
selectedProducts: function() {
return userData.selectedProducts;
},
products: function () {
//console.log($scope.selectedProducts);
return $scope.products; // get all available products
}
}
});
modalInstance.result.then(function (selectedItems) {
//products = selectedItems;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $http, $modalInstance, products, selectedProducts, user) {
//console.log('user', user);
$scope.products = products;
$scope.selected = selectedProducts;
$scope.chkChange = function(item) {
console.log(item);
var index = $scope.selected.indexOf(item);
if (index > -1) {
$scope.selected.splice(index, 1);
}
else {
// not selected --> we have to add it
$scope.selected.push(item);
}
console.log($scope.selected);
};
//console.log(selectedProducts);
$scope.ok = function () {
// prepare everything for sending to sever
// --> probably check here if the data have changed or not (not implemented yet)
console.log('new selection', $scope.selected);
var data = $.param({
json: JSON.stringify({
user: user.name,
products: $scope.selected
})
});
$http.post('/echo/json/', data)
.success(function(data, status) {
console.log('posted the following data:', data);
});
$modalInstance.close();//); $scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
//custom filter to display the selected products.
app.filter('array', function() {
return function(input) {
//console.log(input);
return input.join(', ');
};
});body {
padding: 5px;
}<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="myApp">
<div ng-controller="mainController">
<script type="text/ng-template" id="myModalContent.html">
<!-- template for modal -->
<div class="modal-header">
<h3 class="modal-title">Choose your products!</h3>
</div>
<div class="modal-body">
<form>
<div class="checkbox" ng-repeat="item in products">
<label>
<input type="checkbox" ng-click="chkChange(item)" ng-checked="selected.indexOf(item) !== -1"/>
{{item}}
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table">
<tr>
<th>User name</th>
<th>products selected</th>
</tr>
<tr ng-repeat="user in userData">
<td>{{user.name}}</td>
<td><button ng-click="changeProducts(user)">{{( user.selectedProducts | array ) || 'nothing selected!' }}</button></td>
</tr>
</table>
</div>
</div>关于javascript - 创建带有表单内容的弹出窗口，然后在父页面中显示输出并发送到数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29807422/