То, что я пытаюсь сделать, это создать страницу администратора, которую я могу использовать для редактирования таблицы с использованием Javascript.Для чего нужны живые результаты для тяги трактора, чтобы опубликовать на нашем сайте.Все, что мне нужно, это иметь возможность сообщать водителя, транспортное средство, расстояние и автоматически сортировать по расстоянию.В настоящее время я могу сделать все это для одной таблицы, но я хочу добавить вторую таблицу для другого класса.Я не знаю, возможно ли это или нет.Я думал о попытке вызвать другую таблицу из другого HTML-файла, но не знаю, как отобразить обе таблицы из двух разных HTML-файлов вместе.Любая помощь приветствуется.У меня есть некоторый опыт работы с Javascript, но не столько, сколько нужно для этого проекта.
Я попытался обновить два разных html-файла, которые работают, но не могу получить их на той же html-странице, как если бы они были нанаш веб-сайт.
Я должен быть в состоянии быть на странице администратора, ввести информацию о драйвере, щелкнуть новую строку для следующего съемника, сохранить его и так далее.Когда закончите с классом, щелкните новый класс (новая таблица) и повторите все заново.После этого я хочу опубликовать его, но очистить все, чтобы быть готовым к следующему событию.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Results</title>
<style>
table {
border-spacing: 0;
width: 50%;
border: 1px solid #000000;
counter-reset: rowNumber;
}
th, td {
text-align: left;
padding: 16px;
}
table tr{
counter-increment: rowNumber;
}
tr:nth-child(even){
background-color: #f2f2f2
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<table>
<thead>
<th colspan="3"><h1 align="center">Medford, WI</h1></th>
<tr>
<th colspan="3"><h2 align="center">Light Super Stock Tractors</h2></th>
</tr>
<tr>
<th>Driver</th>
<th>Vehicle</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>
<?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');
?>
<!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">
$(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);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable2').html('');
/*We load the table */
$.get('myTable2.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable2').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow2').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 = $($('#myTable2 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);
}
$('#myTable2 tbody').append(tr);
});
$('#addHeader2').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 = $($('#myTable2 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);
}
$('#myTable2 tbody').append(tr);
});
$('#addColumn2').click(function (event) {
event.preventDefault();
$.each($('#myTable2 table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable2 table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable2').click(function (event) {
event.preventDefault();
var table = $('#myTable2').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable2').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable2').slideToggle();
}, 100);
});
});
});
</script>
</head>
<body>
<h1 align="center">Live Results Admin Page</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>
<section>
<article>
<div id="myTable2" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
<a href="#" id="addRow2">New row</a>
</li>
<li>
<a href="#" id="addColumn2">New column</a>
</li>
<li>
<a href="#" id="saveTable2">Save table</a>
</li>
</ul>
</nav>
</article>
</section>
</body>
</html>