當用戶提交表單時如何在表格單元格中呈現任務

Question

 <?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?>

我已經開始研究 ajax，當用戶提交此表單時，我真的很困惑如何呈現任務。 我已經創建了一個 html 表，然后用 javascript 添加了單元格。 當用戶單擊表單時，我希望他們提交任務及其持續時間，然后看到提交按鈕下方顯示的任務。

<html>
 <body>
  <table id="table"> <!-- table -->
    <th colspan="7" id="month"></th>
  </table>
 </body>
</html>

 <script> var table = document.getElementById("table"); // check current month var month = new Date(); var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; for (var i = 0; i < Allmonths.length; i++) { if (month.getMonth() == i) { document.getElementById("month").innerHTML = Allmonths[i]; } }; // start creating cells var row; var cell; var date = 1; var newDate = 1; var i; var j; for (i = 0; i < 5; i++) { row = table.insertRow(-1); for (j = 0; j < 7; j++) { cell = row.insertCell(-1); var newI = i; var newJ = j; if (newI >= 4 && newJ >= 3) { cell.className = "grey-cell"; cell.innerHTML = newDate; newDate++; } else { cell.className = "cell"; cell.innerHTML = date; date++; } }; }; // on clicking a cell, display a form, and then render the task on submission $("td").click(function(event){ var box = $("<div>").html( "<form>" + "<label for=task>" + "<input type=text id=task name=task placeholder=Task>" + "</label>" + "<label for=duration>" + "<input type=number id=duration name=duration placeholder=Duration>" + "</label>" + "<button id=add type=submit>Add Task</button>" + "</form>" + "<p id=task></p>" ) $(this).append(box); $("#add").click(function(){ $("#task").load("tasks.php #task", function(responseTxt){ $(this).html(responseTxt) }); }); }) </script>

Answer 1

電線在這里有點交叉。 當您在具有數字的表格單元格內創建輸入表單時，您在單元格上的單擊事件將應用於表單元素。 最好讓該表單出現在您的點擊事件之外。 我把它移到了它自己的 div 中。 要查看表單的結果，您必須在提交按鈕上使用preventDefault()以防止頁面刷新。 然后，您可以使用表單中的值附加一個“任務”div

 var table = document.getElementById("table"); // check current month var month = new Date(); var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; for (var i = 0; i < Allmonths.length; i++) { if (month.getMonth() == i) { document.getElementById("month").innerHTML = Allmonths[i]; } }; // start creating cells var row; var cell; var date = 1; var newDate = 1; var i; var j; for (i = 0; i < 5; i++) { row = table.insertRow(-1); for (j = 0; j < 7; j++) { cell = row.insertCell(-1); var newI = i; var newJ = j; if (newI >= 4 && newJ >= 3) { cell.className = "date-cell grey-cell"; cell.innerHTML = newDate; newDate++; } else { cell.className = "date-cell cell"; cell.innerHTML = date; date++; } }; }; // on clicking a cell, display a form, and then render the task on submission $("td.date-cell").click(function(event) { $("#create-task").html( "<form>" + "<label for=task>" + "<input type=text id=task name=task placeholder=Task>" + "</label>" + "<label for=duration>" + "<input type=number id=duration name=duration placeholder=Duration>" + "</label>" + "<button id=add type=submit>Add Task</button>" + "</form>" + "<p id=task></p>" ) $("#add").click(function(e) { // prevent the page reload e.preventDefault(); // get data let duration = $('#duration').val() let task = $('#task').val() $('#tasks').append(`<li>Task: ${task}, duration: ${duration}</li>`) }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table"> <!-- table --> <th colspan="7" id="month"></th> </table> <div id='create-task'></div> <ul id='tasks'></ul>

當用戶提交表單時如何在表格單元格中呈現任務

問題描述

1 個解決方案

解決方案1
0 2021-07-24 16:31:17

當用戶提交表單時如何在表格單元格中呈現任務

問題描述

1 個解決方案

解決方案1 0 2021-07-24 16:31:17

解決方案1
0 2021-07-24 16:31:17