04.01.2020, 11:29
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 162
|
|
|
Работа с датами и таблицами.
Есть форма с таблицей
<form name="MyForm" id="myform" method="post" action="">
<table name="tablename" id="tablename" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Дата</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Company 1</td>
<td>
<input type="date" name="eventdate1" id="ed1" value="">
</td>
<td>
<button class="btn btn-info" onclick="Calc()">Вычислить</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Company 2</td>
<td>
<input type="date" name="eventdate2" id="ed2" value="">
</td>
<td>
<button class="btn btn-info" onclick="Calc()">Вычислить</button>
</td>
</tr>
</tbody>
</table>
</form>
По нажатию на кнопку Вычислить, необходимо взять дату из текущей строки, определить ее день недели и вычислить все дальнейшие даты, с таким же днем недели в том же месяце. Например, ввели 11.12.19, это среда в декабре 2019, нужно вычислить 18.12.19 и 25.12.19, то есть еще две среды.Если выбрана последняя среда месяца, то выбрать все среды следующего месяца. Но я застрял на самом первом этапе, определении текущей даты.
<script>
function Calc() {
var CliDate = $(this).closest('tr').children('td:eq(2)').text();
//var currentRow = $(this).closest("tr");
//var CliDate = currentRow.find("td:eq(2)").text();
alert(CliDate);
return true;
}
</script>
Толкните в нужную сторону, пожалуйста.
|
|
04.01.2020, 12:43
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
savsoft,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function getDates(date)
{ var arr = [date];
date = new Date(date);
var days = 7;
date.setDate(date.getDate() + days);
var month = date.getMonth();
while (date.getMonth() == month) {
arr.push(dateFormat(date))
date.setDate(date.getDate() + days);
}
return arr;
}
function dateFormat(date)
{
return date.toISOString().replace(/T.+$/, "")
}
$("tr").on("click", ".btn-info", function(event) {
event.preventDefault();
var parent = event.delegateTarget;
var CliDate = $("[type='date']", parent).val();
console.log(CliDate, getDates(CliDate))
})
});
</script>
</head>
<body>
<form name="MyForm" id="myform" method="post" action="">
<table name="tablename" id="tablename" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Дата</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Company 1</td>
<td>
<input type="date" name="eventdate1" id="ed1" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Company 2</td>
<td>
<input type="date" name="eventdate2" id="ed2" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Последний раз редактировалось рони, 04.01.2020 в 14:32.
|
|
04.01.2020, 13:17
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 162
|
|
Сообщение от рони
|
|
рони,
|
Почему-то у меня всегда берется дата с первой строки, а не той, где нажата кнопка. |
|
04.01.2020, 14:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
savsoft,
строка 29 исправлена, смотрите код снова.
|
|
04.01.2020, 14:57
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 162
|
|
|
Сообщение от рони
|
savsoft,
строка 29 исправлена, смотрите код снова.
|
Да, спасибо, все работает. Только я начинаю разбираться с javascript, а jquery вообще только начало. Ваш код не совсем понятен для меня. Как лучше, начиная со следующей строки, после строки, в которой нажата кнопка, присвоить датам значения со второго элемента массива дат, пока не закончится массив или не закончатся строки? |
|
04.01.2020, 15:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Сообщение от savsoft
|
|
Как лучше,
|
можно пример html, что хотите получить? |
|
04.01.2020, 15:38
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 162
|
|
|
Сообщение от рони
|
|
можно пример html, что хотите получить?
|
Пример тот же
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function getDates(date)
{ var arr = [date];
date = new Date(date);
var days = 7;
date.setDate(date.getDate() + days);
var month = date.getMonth();
while (date.getMonth() == month) {
arr.push(dateFormat(date))
date.setDate(date.getDate() + days);
}
return arr;
}
function dateFormat(date)
{
return date.toISOString().replace(/T.+$/, "")
}
$("tr").on("click", ".btn-info", function(event) {
event.preventDefault();
var parent = event.delegateTarget;
var CliDate = $("[type='date']", parent).val();
alert(CliDate);
console.log(CliDate, getDates(CliDate))
})
});
</script>
</head>
<body>
<form name="MyForm" id="myform" method="post" action="">
<table name="tablename" id="tablename" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Дата</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Company 1</td>
<td>
<input type="date" name="eventdate1" id="ed1" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Company 2</td>
<td>
<input type="date" name="eventdate2" id="ed2" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Company 3</td>
<td>
<input type="date" name="eventdate3" id="ed3" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Company 4</td>
<td>
<input type="date" name="eventdate4" id="ed4" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>5</td>
<td>Company 5</td>
<td>
<input type="date" name="eventdate5" id="ed5" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
В этом примере после нужно получить результат getDates(CliDate), и если введена дата, например во второй строке и нажата кнопка соответственно во второй строке - заполнить следующие строки (3. 4 и т.д.) пока на закончатся элементы массива или строки. То есть мы вводим в какой-либо строке дату, например эта дата вторник, то следующие строки заполняем датами следующих вторников текущего месяца. Если выбран последний вторник в месяце - то вторниками следующего месяца. Пока не закончатся даты в массиве или строки в таблице.
|
|
04.01.2020, 15:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
savsoft,
не понимаю.
|
|
04.01.2020, 16:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
savsoft,
возможно вы хотели так
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function getDates(date)
{ var arr = [];
date = new Date(date);
if(!date) return arr;
var days = 7;
date.setDate(date.getDate() + days);
var month = date.getMonth();
while (date.getMonth() == month) {
arr.push(dateFormat(date))
date.setDate(date.getDate() + days);
}
return arr;
}
function dateFormat(date)
{
return date.toISOString().replace(/T.+$/, "")
}
$("tr").on("click", ".btn-info", function(event) {
event.preventDefault();
var parent = event.delegateTarget;
var CliDate = $("[type='date']", parent).val();
var arrDate = getDates(CliDate);
$(parent).nextAll().find("[type='date']").val(function(i, v) {
return arrDate[i] === void 0? v : arrDate[i];
})
})
});
</script>
</head>
<body>
<form name="MyForm" id="myform" method="post" action="">
<table name="tablename" id="tablename" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Дата</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Company 1</td>
<td>
<input type="date" name="eventdate1" id="ed1" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Company 2</td>
<td>
<input type="date" name="eventdate2" id="ed2" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Company 3</td>
<td>
<input type="date" name="eventdate3" id="ed3" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Company 4</td>
<td>
<input type="date" name="eventdate4" id="ed4" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
<tr>
<td>5</td>
<td>Company 5</td>
<td>
<input type="date" name="eventdate5" id="ed5" value="">
</td>
<td>
<button class="btn btn-info" >Вычислить</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
|
|
04.01.2020, 19:07
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 162
|
|
|
рони,
Проверил, вроде работает как нужно. Буду теперь разбирать, что каждая строчка значит в вашем скрипте.
Огромное спасибо.
|
|
|
|
