Работа с датами и таблицами.
Есть форма с таблицей
<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>
Толкните в нужную сторону, пожалуйста. |
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>
|
Цитата:
|
savsoft,
строка 29 исправлена, смотрите код снова. |
Цитата:
|
Цитата:
|
Цитата:
<!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 и т.д.) пока на закончатся элементы массива или строки. То есть мы вводим в какой-либо строке дату, например эта дата вторник, то следующие строки заполняем датами следующих вторников текущего месяца. Если выбран последний вторник в месяце - то вторниками следующего месяца. Пока не закончатся даты в массиве или строки в таблице. |
savsoft,
не понимаю. |
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>
|
рони,
Проверил, вроде работает как нужно. Буду теперь разбирать, что каждая строчка значит в вашем скрипте. Огромное спасибо. |
| Часовой пояс GMT +3, время: 20:26. |