將行追加到網格

Question

我想在用戶單擊按鈕后向該網格追加一行。 我嘗試使用一些簡單的JavaScript和innerHTML ，在其中將以HTML格式設置的字符串分配給最后一行末尾的空div節（ "appendDataHere" ）。 我遇到的問題是，該行未直接附加在其標題行的下面–無論如何使用<div>標記，都存在間隙。 我還希望能夠繼續添加行而不刪除之前添加的行。

 function appendData() { var driver = document.getElementById("selDriver").value; var pickup = document.getElementById("selPickup").value; var dropOff = document.getElementById("selDropOff").value; var numPsngers = document.getElementById("selNumPsngers").value; document.getElementById("appendDataHere").innerHTML = "<div class=\\"grid-item\\">" + driver + "</div><div class=\\"grid-item\\">" + pickup + "</div><div class=\\"grid-item\\">" + dropOff + "</div><div class=\\"grid-item\\">" + numPsngers + "</div><div class=\\"grid-item\\">7:03:00 PM" + "</div><div class=\\"grid-item\\"><input type=\\"checkbox\\" name=\\"noShow\\" value=\\"showedUp\\">" + "</div><div class=\\"grid-item\\"><input type=\\"submit\\" value=\\"Complete\\"></div>"; } 

 .grid-item { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 20px; text-align: center; } .grid-container-two { display: grid; grid-template-columns: auto auto auto auto auto auto auto; padding: 5px; margin-top: 50px; margin-bottom: 50px; margin-right: 150px; margin-left: 150px; } .grid-item-header-two { background-color: #00cc00; color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 20px; text-align: center; } 

 <div class="grid-container"> <div class="grid-item-header">Assigned To </div> <div class="grid-item-header">From </div> <div class="grid-item-header">To </div> <div class="grid-item-header">Num Passengers </div> <div class="grid-item-header">Assign </div> <div class="grid-item"> <select id="selDriver"> <option value="d0">Dr0</option> <option value="d1">Dr1</option> <option value="d2">Dr2</option> </select> </div> <div class="grid-item"> <select id="selPickup"> <option value="onetwothreeMain">123 Main Street</option> <option value="sixhundredpence">1600 Penn. Ave</option> </select> </div> <div class="grid-item"> <select id="selDropOff"> <option value="onetwothreeMain">123 Main Street</option> <option value="sixhundredpence">1600 Penn. Ave</option> </select> </div> <div class="grid-item"> <select id="selNumPsngers"> <option value="one">1</option> <option value="two">2</option> </select> </div> <div class="grid-item"> <input type="submit" value="+" onclick="appendData()"> </div> </div> <div class="grid-container-two"> <div class="grid-item-header-two">Assigned To</div> <div class="grid-item-header-two">From</div> <div class="grid-item-header-two">To</div> <div class="grid-item-header-two">Num Passengers</div> <div class="grid-item-header-two">Time</div> <div class="grid-item-header-two">No Show</div> <div class="grid-item-header-two">Complete</div> <div id="appendDataHere"> </div> </div> 

Answer 1

希望這對您有所幫助，您需要更多CSS來解決行之間的間隙，但是現在它可以按預期工作。

我在innerHTML之前添加了少量+= ，以便您可以添加越來越多的內容，如果您不想添加多個內容，只需像以前一樣在問題中分配它即可。

我已經更改了div的層次結構，以獲取結果。

 function appendData() { var driver = "driver val" var pickup = "pickup val" var dropOff = "drop off val" var numPsngers = "num of pssngr" document.getElementById("table_id").innerHTML += "<tr> <td class=\\"grid-item\\">" + driver + "</td><td class=\\"grid-item\\">" + pickup + "</td><td class=\\"grid-item\\">" + dropOff + "</td><td class=\\"grid-item\\">" + numPsngers + "</td><td class=\\"grid-item\\">7:03:00 PM" + "</td><td class=\\"grid-item\\"><input type=\\"checkbox\\" name=\\"noShow\\" value=\\"showedUp\\" />" + "</td><td class=\\"grid-item\\"><input type=\\"submit\\" value=\\"Complete\\" /></td> </tr>"; } 

 .grid-item { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.8); text-align: center; padding-top: 5px; padding-bottom: 5px; } .grid-item-header-two { background-color: #00cc00; color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 20px; text-align: center; } 

 <button onClick="appendData()">Add</button> <table id="table_id"> <tr> <td class="grid-item-header-two">Assigned To</td> <td class="grid-item-header-two">From</td> <td class="grid-item-header-two">To</td> <td class="grid-item-header-two">Num Passengers</td> <td class="grid-item-header-two">Time</td> <td class="grid-item-header-two">No Show</td> <td class="grid-item-header-two">Complete</td> </tr> </table>