質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

javascriptでシフト管理スケジュールを制作したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 267

kty000

score 2

前提・実現したいこと

javascriptを使って、縦型の社員のシフト管理スケジュールを作っています。
わけあって少し独学でHTMLをかじった程度の素人が突然1人で開発することになりとても苦労しています。。。
初めてでコードが汚く、また勉強しながらなので無駄なコードもあるかもしれませんがご容赦ください。

日付を縦1列で表示し、その隣に曜日を表示を表示させたいのですが、曜日の表示がうまくできません。
appendChildがうまくできずエラーになっているみたいなのですがどのようにすればよいかお力添えいただけると助かります。よろしくお願いします。

発生している問題・エラーメッセージ

DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent


DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="uft-8">
  <title>シフト管理</title>
</head>

<body>
  <div id="title">
  </div>

  <table border="1" id="calender">
  </table>

  <script type="text/javascript">
    const now = new Date();                                        //データ取得
    var year = now.getFullYear();                                  //年の取得
    var month = (now.getMonth() + 1);                                //月の取得(0〜11月)
    var today = now.getDate();                                     //日付の取得
    console.log("今日:", year, "年", month, "月", today, "日");


    var weekTbl = new Array("日", "月", "火", "水", "木", "金", "土");     //曜日定義
    var week = weekTbl[now.getDay()];                             //漢字で曜日を取得
    console.log("曜日:", weekTbl[now.getDay()]);


    now.setDate(1);                                               //月初の1日をセット
    var startYear = now.getFullYear()                             //月初の年取得
    var startMonth = now.getMonth() + 1                             //月初の月取得
    var startDate = now.getDate()                                 //月初の日付取得
    var startWeek = weekTbl[now.getDay()]               //月初の曜日
    console.log("月初:", startYear, "年", startMonth, "月", startDate, "日", startWeek, "曜日")


    var endMonthly = new Date(now.getFullYear(), now.getMonth() + 1, 0)//月末の計算(0日は1日の1つ前の日付)
    var endYear = endMonthly.getFullYear()                         //月末の年取得
    var endMonth = endMonthly.getMonth() + 1                         //月末の月取得
    var endDate = endMonthly.getDate()                             //月末の日付取得
    var endWeek = weekTbl[endMonthly.getDay()]                     //月末の曜日取得
    console.log("月末:", endYear, "年", endMonth, "月", endDate, "日", endWeek, "曜日")




    // カレンダーの表示
    document.getElementById("title").append(year, "年", month, "月");

    var table = document.getElementById("calender")

    //日付を1つづつ出力
    for (var n = startDate; n <= endDate; n++) {
      var i = 0
      var trAdd = document.createElement("tr")           //trを新しく追加
      var tr = document.getElementsByTagName("tr")         //bodyのtrを取得
      var thAdd = document.createElement("th")           //thを新しく追加
      thAdd.textContent = n                       //n(日付)をthに記述
      trAdd.appendChild(thAdd)                     //trを取得して子要素としてthを追加
      table.appendChild(trAdd)                     //tableの最後にtrを追加
      for (i = 0; i <= n; i++){
        var date = document.getElementsByTagName("th")       //bodyのth(日付)を取得
        date[i].appendChild(thAdd)
      }
    }


  //従業員名を取得し<td>で1つづつ追加するコードを記述する

  </script>
</body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • H40831

    2019/12/25 21:24

    HTMLとJavaScriptだけですと、
    複数人でデータを共有することはできませんが、
    その点は解決されてるのでしょうか?

    キャンセル

  • kty000

    2019/12/26 10:16

    実はそのあたりはまだどうしようか悩んでいます;-;
    勉強不足ながらも作れと言われているのでできそうなところから少しづつやっています。

    pythonを少し勉強したので、それを使ってデータベース?を作ってそこにシフト内容を登録し、jsをつかってそれぞれのアカウントで呼び出したりしてできないかなぁとぼんやり考えています(できるかは不明ですが)

    キャンセル

  • H40831

    2019/12/26 10:55 編集

    条件や規模次第でいろんなやり方が考えられます。
    しかし、仰る方法でやるにしろ、他の方法でやるにしろ、勉強しなければいけないこと、勉強しても実践してみなければわからないメリットやデメリットなどあると思います。
    1人で作り上げるのは難しいので、MENTAなどで導いてくれる先生を見つけるのも有りだと思います。

    回答になってなくてすみませんでした。

    キャンセル

  • kty000

    2019/12/26 11:10

    MENTAというサービスを知らなかったので、教えていただいてありがとうございます、調べてみます!
    勉強しながらがんばってみます^^

    キャンセル

回答 1

checkベストアンサー

0

こんにちは、kty000さん

慣れない開発の仕事とのことで、ご苦労さまです。
以下に、例として、コードを更新してみました。

...(省略)...

    //日付を1つづつ出力
    for (var n = startDate; n <= endDate; n++) {
      var tr = document.createElement('tr'); // 横1行のタグを生成する ... (1)
      var tdDate = document.createElement('td'); // 縦1列目のタグ(日付)を生成する ... (2)
      var tdDay = document.createElement('td'); // 縦2列目のタグ(曜日)を生成する ... (3)

      now.setDate(n); // Dateオブジェクトを n の日付に更新する

      tdDate.textContent = n; // 日付を値としてセットする
      tdDay.textContent = weekTbl[now.getDay()]; // 曜日を値としてセットする

      tr.appendChild(tdDate); // (1)の子要素として(2)を追加する
      tr.appendChild(tdDay); // (1)の子要素として(3)を追加する

      table.appendChild(tr); // (2)と(3)の子要素を保持した(1)をtableタグの子要素として追加する
    }

...(省略)...

JavaScriptでタグを生成する場合は、いきなりJS生成するのではなく、一旦手打ちでタグを入力してみて、生成する順序を考えるとわかりやすいです。

今回の条件ですと

  1. 縦に日付を並べる
  2. その横に曜日を並べる

とのことなので、以下のようになると思います。
(ちなみに、<th>はテーブルの見出しセルを示すものなので、今回の条件にはそぐわないです。)
(参考) http://www.htmq.com/html/th.shtml

    <table border="1" id="calender">
      <tr>
        <td>1</td><td></td>
      </tr>
      <tr>
        <td>2</td><td></td>
      </tr>

      ...(省略)

    </table>

そのため、このタグを構成する場合の思考の流れは、

  1. tableにappendChildする必要がある
  2. trタグを順番に追加していく必要がある
  3. trタグの中身は日付・曜日だ
  4. では、日付と曜日のタグつくり、trにappendChildし、trをtableにappendChildしよう
  5. この内容を日付分、ループを回そう

という感じだと思います。

以上、参考になれば、幸いです。
開発頑張ってください!応援しています💪

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/26 11:04

    回答いただきありがとうございます。
    わたしの追加の考え方がよくなかったみたいですね、、、丁寧にありがとうございます!参考にしながらやってみます

    キャンセル

  • 2019/12/27 10:28

    いただいたコードを参考に、無事にできました!回答いただきありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる