javascript - 日時JavaScriptをテーブル列にバインド

Question

私は31行と4つのテーブル列を持つhtmlテーブルを持っていました。最初の列を今月の日付にバインドするためにjavascript(Jquery)を書き込もうとしています。

これは私のコードです

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function ($) {
                var table = document.getElementById("myTable")
                var myDate = new Date();
                myDate.setDate(myDate.getDate() - 1)
                for (var i = 0; i < 16; i++) {
                    var row = document.createElement("tr");
                    var cell = document.createElement("td");
                    cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear();
                    myDate.setDate(myDate.getDate() + 1)
                    row.appendChild(cell);
                    table.tBodies[0].appendChild(row);
                }
            });
    </script>
</head>

<body>
<table id="myTable"></table>

</body>
</html>

score 4 · Accepted Answer

これは、より短い月を扱っている場合にループを中断する解決策です (たとえば、4 月の場合、表には2013 年 4 月 31 日が表示されません)。

$(function() {
    var table = document.getElementById("myTable")
    var myDate = new Date();
    var month = myDate.getMonth() + 1;
    var firstOfMonth = new Date();
    firstOfMonth.setDate(1);
    for (var i = 0; i < 31; i++) {
        myDate.setDate(firstOfMonth.getDate() + i);
        if (myDate.getMonth() + 1 != month) break;
        var row = document.createElement("tr");
        var cell = document.createElement("td");
        cell.innerText = formatDate(myDate, dateFormat);
        row.appendChild(cell);
        table.tBodies[0].appendChild(row);
    }
});

jsfiddle へのリンク

注: OP では、最初のオプションとして javascript が言及されています (jQuery はバケツのみ)。そのため、コードをプレーンな js のままにしました (DOM 対応ラッパーを除く)。jQuery から完全に独立したソリューションが必要な場合は、この SO 投稿で説明されているように、DOM コンテンツロードイベントをバインドします。

score 1 · Accepted Answer

に追加しようとしてtbodyいますが、定義していません。HTMLをに変更

<table id="myTable"><tbody></tbody></table>

すでに行とセルがある場合は、新しいセルを前に追加するだけです

for (var i = 0; i < 16; i++) {
                    var cell = document.createElement("td");
                    cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear();
                    myDate.setDate(myDate.getDate() + 1)
                    $(table).find('tr').eq(i).prepend(cell);
                }

score 1 · Accepted Answer

あなたの質問はこの質問に関連していると思います。
つまり、空のテーブルに今月の各日に 1 行を追加する Javascript 関数を探しています。各行には「日付」、「開始時刻」、「終了時刻」、「時間の種類」という名前の 4 つの列があり、最初の列 (「日付」) には「dd/mm/」形式の日付のテキスト入力が含まれている必要があります。ええ」。
もしそうなら、ここに私の解決策があります：

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
        // See https://stackoverflow.com/questions/4881938/javascript-calculate-number-of-days-in-month-for-a-given-year
        Date.prototype.daysInMonth = function(year, month) { 
            var monthStart  = new Date(year, month, 1);
            var monthEnd    = new Date(year, month + 1, 1);
            var monthLength = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));
            var mm  = ((month + 1) < 10) ? ('0' + (month + 1)) : (month + 1);
            var ret = new Array();
            for (var i = 1; i <= monthLength; i++) {
                var dd = (i < 10) ? ('0' + i) : i;
                ret.push(dd + '/' + mm + '/' + year);
            }
            return ret;
        };

        function addRows(table, dates) {
            var idx = 1;
            for (var i in dates) {
                table.append('<tr>'+
                             '<td><input name="date'+idx+'" id="date'+idx+'" class="date" value="'+dates[i]+'"></td>'+
                             '<td><input name="startTime'+idx+'" id="startTime'+idx+'"></td>'+
                             '<td><input name="endTime'+idx+'" id="EndTime'+idx+'"></td>'+
                             '<td>'+
                             '<select name="hourType'+idx+'" id="hourType'+idx+'">'+
                             '<option value="">Please select</option>'+
                             '<option value="1">Regular</option>'+
                             '<option value="2">Overtime</option>'+
                             '</select>'+
                             '</td>'+
                             '</tr>');
                idx++;
            }
        }

        $(function() {
            var myDate = new Date();
            var year   = myDate.getFullYear();
            var month  = myDate.getMonth(); 
            var dates  = myDate.daysInMonth(year, month);
            var table  = $("#myTable").find("tbody");
            addRows(table, dates);
        });
        </script>       
    </head>
    <body>
        <form>
          <table id="myTable">
            <thead>
              <tr>
                <th>Date</th>
                <th>Start Time</th>
                <th>End Time</th>
                <th>Hour Type</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </form>
    </body>
</html>

明らかに、当月の日数によっては、テーブルの行数が 31 未満になる場合もあります。

score 0 · Accepted Answer

 $(function ($) {
     var table = $("#myTable")
     var myDate = new Date();

     myDate.setDate(myDate.getDate() - 1);

     for (var i = 0; i < 16; i++)
     {
         var row = $('<tr/>');         
         var cell = $('<td/>');

         cell.text
          (myDate.getDate() +
           "/" +
           (myDate.getMonth() + 1) +
           "/" +
           (1900 + myDate.getYear()));

         myDate.setDate(myDate.getDate() + 1);

         row.append(cell);
         table.append(row);
     }
 });

score 0 · Accepted Answer

これは動作中の jsFiddleです。

私が使用する方法：

var d = new Date();              // get current date
var currentMonth = d.getMonth(); // save current month
d.setDate(1);                    // set date to first day of current month

// (...) create your table header

// create 31 rows
for(var i=1; i<=31; i++) {
    var line = $(document.createElement('tr'));
    if(d.getMonth() == currentMonth) {
        // add the date to the first column
        line.append('<td>'+dateToDMY(d)+'</td>')
            .append('<td></td>')
            .append('<td></td>')
            .append('<td></td>');
    } else {
        // in case you always want to have 31 rows, whatever the month
        line.append('<td colspan="4" class="empty">&nbsp</td>');
    }

    $('#myTable').append(line);  // append the line to the table
    d.setDate(d.getDate() + 1);  // increase the date
}

/* 
 * Format Date : dd/mm/yyyy
 * Based on Adrian Maire work
 * http://stackoverflow.com/a/10685571/1238019
*/
function dateToDMY(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '/' + (m<=9 ? '0' + m : m) + '/' + y;
}

setDate 関数を使用すると、日付の月が範囲外の日で自動的に更新されることに注意してください (うるう年を気にする必要はありません)。

score 0 · Accepted Answer

あなたの質問はあまり明確ではありません..しかし、あなたのコードから私が理解したのは、列1の日付がから(CURRENT_DATE - 1)までのテーブル16行を作成しているということです(CURRENT_DATE+14)。

テンプレートを使用してテーブル行をレンダリングしました。必要に応じてテンプレートを更新して、他の列をレンダリングします。

デモ: http://jsfiddle.net/nLQ7q/3/

$(document).ready(function ($) {
     var table = $("#myTable")
     var myDate = new Date();
     myDate.setDate(myDate.getDate() - 1);

     var rowTmpl = '<tr><td>{DATE}</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';
     var rows = [];

     for (var i = 0; i < 16; i++) {
         var row = rowTmpl.replace('{DATE}', myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear());
         myDate.setDate(myDate.getDate() + 1)
         rows.push(row);         
     }

      table.html(rows.join(''));
 });

日付ピッカーを使用した少し派手なバージョンhttp://jsfiddle.net/nLQ7q/4/

score 0 · Accepted Answer

これを試してみてください:- http://jsfiddle.net/adiioo7/9fQxq/

使用する

table.appendChild(row);

それ以外の

table.tBodies[0].appendChild(row);

score 0 · Accepted Answer

これを試すことができます: FIDDLE

<table id="myTable"></table>

マークアップにないtbodyので、それを入れて以下のjqueryを使用しました

`-JQUERY-`:

  jQuery(document).ready(function ($) {
     var table = $("#myTable");
     var myDate = new Date();
     myDate.setDate(myDate.getDate() - 1)
     for (var i = 0; i < 16; i++) {
        var row = $("<tr>");
        var cell = $("<td>");
        myDate.setDate(myDate.getDate() + 1)
        cell.text(myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear());
        row.append(cell);
        table.find('tbody').append(row);
    }
    $('#myTable').find('tr').each(function (i, v) {
       $(this).append('<td/><td/><td/>');
       $('td:not(:first)', this).text(i + 1);
    });
 });

それぞれにrow in the tr日付first tdとcreated other tdsいくつかのデフォルトのテキストが入力されています。

私はこれを思いついた：FIDDLE

score 0 · Accepted Answer

私があなたの質問を正しく理解していれば、最初の列を今月の日付にバインドしたいですか? フィドル

$(document).ready(function () {
    // Get today date
    var d = new Date();
    //Get Days of Month
    var n = new Date(d.getYear(), d.getMonth()+1, 0).getDate();

    //Run loop for number of days
    for (var i = 1; i <= n; i++) {
        //Create row data
        var row = '<tr><td>'+ i + "/" + (d.getMonth() + 1) + "/" + d.getFullYear()+'</td><td><td/><td><td/><td><td/></tr>';

        // Append row data to table
        $('#myTable').append(row);
    }
});

javascript - 日時JavaScriptをテーブル列にバインド

9 に答える 9

これを試すことができます: FIDDLE

-JQUERY-:

私はこれを思いついた：FIDDLE

Related

Reference

`-JQUERY-`: