如何使用javascript从另一个页面编辑表内容
我正在寻找添加一个页面到我的网站，将有一个表，将显示可用的产品 我希望能够做到的是，使表的内容可以从另一个页面（比如管理页面）更改。是否可以使用JavaScript或类似的东西来做类似的事情？如果是的话，你能给我指一下正确的方向吗 非常感谢。方法不多 不涉及服务器端 您需要对另一个窗口的引用。例如，您可以通过打开窗口-如何使用javascript从另一个页面编辑表内容,javascript,Javascript,我正在寻找添加一个页面到我的网站，将有一个表，将显示可用的产品 我希望能够做到的是，使表的内容可以从另一个页面（比如管理页面）更改。是否可以使用JavaScript或类似的东西来做类似的事情？如果是的话，你能给我指一下正确的方向吗 非常感谢。方法不多 不涉及服务器端 您需要对另一个窗口的引用。例如，您可以通过打开窗口-window.open（）来获得该信息 然后使用HTML DOM方法，例如document.getElementById（…），然后使用特定元素的API： 涉及服务器端 这意味
window.open（）document.getElementById（…）XMLHttpRequest另一个页面必须定期检查，或者第一个页面必须给它一些信号——调用您编写的JavaScript方法，或者重新加载窗口。另一种选择是使用推送概念，但这目前是一种先进的技术。您可以使用
XMLHttpRequest$.ajax（）websocket这是可能的，但有一些限制： 您应该更改显示产品的表，以获取使用ajax显示的值。然后你有两种可能：（我很确定还有更多，但我现在只想到这两种）
- 创建一个计时器，它将每X秒获取一个产品的值
- 创建一个侦听器，当数据库中的值更新时将调用该侦听器
jQuery AJAX
tr，td，th{
边界塌陷：塌陷；
边框：1px实心；
}
运输署{
高度：22px；
最小宽度：125px；
}
"http://jquery.com"
/* ---------------------------------- */
/*请参阅此答案的脚本部分*/
/* ---------------------------------- */
jqueryajax表
/**/
$（文档）.ready（函数（）{
var getTable=函数（）{
/*我们把舱倒空*/
$（'#myTable'）.html（''）；
/*我们把桌子装上东西*/
$.get（'myTable.html'，函数（回调_数据）{
var table=回调_数据；
document.getElementById（'myTable'）。innerHTML=table；
});
};
getTable（）；
/* ----- */
/*新行按钮*/
$（'#addRow'）。单击（函数（事件）{
/*防止真正的锚点击事件（转到href链接）*/
event.preventDefault（）；
/*我们得到一行中的列数*/
var colNumber=$（$（'#myTable tbody tr'）[0]）。children（'td'）。length；
var tr=document.createElement（'tr'）；
var td=“”；
对于（变量i=0；isaveTable.php
myTable.html
洛雷姆·伊普苏姆·多洛。
维利特，维罗，奎斯。
身份证，多洛尔，
if($_POST['type'] === 'updateProduct') {
// update database with new price
// You could have a field in the database that now say's
// that the product has been updated
// send the response
echo 'done';
}
// And the admin ajax something like this
$.ajax({
type: 'POST',
url: 'linkToYourFile.php', // The php file that will process the request
data: {
type: 'updateProduct', // This is all the data you wan't to send to your php file
productID: 8484737,
newPrice: '$100.99'
},
success: function( result ) { // if we get a response
if(result === 'done') {
// The product has been updated from the admin side
}
}
});
// on the client side
if($_POST['type'] === 'checkForUpdates') {
// Contact the database and check that $_POST['productID']
// has been updated
// use php's json_encode function to echo the result
}
var checkForUpdates = function() {
$.ajax({
type: 'POST',
url: 'LinkToYourFile.php',
dataType: 'JSON',
data: {
type: 'checkForUpdates',
productId: 8484737
},
sucess: function ( result ) {
if( result.updated === true ) {
someElementPrice.textContent = result.newPrice;
}
}
});
};
window.setInterval(checkForUpdates, 3000); // Send's the update request every 3 seconds
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style rel="stylesheet" type="text/css">
tr, td,th{
border-collapse: collapse;
border:1px solid;
}
td{
height:22px;
min-width:125px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
<script type="text/javascript">
/* ---------------------------------- */
/* See the SCRIPT part of this answer */
/* ---------------------------------- */
</script>
</head>
<body>
<h1>jQuery AJAX Table</h1>
<section>
<article>
<div id="myTable" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
<a href="#" id="addRow">New row</a>
</li>
<li>
<a href="#" id="addColumn">New column</a>
</li>
<li>
<a href="#" id="saveTable">Save table</a>
</li>
</ul>
</nav>
</article>
</section>
</body>
</html>
/* On page load */
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable').html('');
/*We load the table */
$.get('myTable.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable tbody').append(tr);
});
$('#addColumn').click(function (event) {
event.preventDefault();
$.each($('#myTable table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable').click(function (event) {
event.preventDefault();
var table = $('#myTable').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable').slideToggle();
}, 100);
});
});
});
<?php
if(!isset($_POST['myTable']))
die('No data provided.');
$table = $_POST['myTable'];
$handle = fopen('myTable.html','w');
$result = fwrite($handle,$table);
if($result)
fclose($handle);
else
die('Error writing file');
?>
<table>
<thead>
<tr>
<th>Lorem ipsum dolor.</th>
<th>Velit, vero, quis.</th>
<th>Id, dolore, commodi!</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum.</td>
<td>Voluptatibus, maiores.</td>
<td>Quod, et.</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Ex, assumenda!</td>
<td>Qui, pariatur!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Alias, amet.</td>
<td>Delectus, itaque!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Praesentium, quod.</td>
<td>Dolor, praesentium?</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Beatae, perferendis!</td>
<td>Voluptates, earum!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Ratione, quis.</td>
<td>Cupiditate, repellendus.</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Porro, labore.</td>
<td>Eligendi, nemo!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Soluta, suscipit.</td>
<td>Dolorem, dolores.</td>
</tr>
</tbody>
</table>