当我的桌子变大时如何让我的按钮向下移动
[英]How to make my buttons shift downwards when my table grows
问题描述
我的 HTML 有问题，当我 go 将超过 3 个新资产添加到我的表中时，下面的按钮（添加新资产、保存并提交）没有被按下。 这是一个 flex 问题，我 go 如何解决这个问题？ 我把我所有的按钮都放在一个 div 中，因为我发现这样可以更好地对齐我的页面。 但是当我在 div 中没有我的按钮时，它可以工作。 我正在重构我的代码以包含更多的 div 以包含所有内容。
$('document').ready(() => { // Handler to Add New Asset const table = $("#formTable tbody"); let count = 1; $('#add').click(() => { const newRow = ` <tr index="${count}"> <form> <td><input id='asset_tag_no${count}' type='text' bottom required /></td> <td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><input id='description${count}' type='text'/></td> <td><input id='cost${count}' type='value'/></td> <td><input id='po_no${count}' type='text' /></td> <td><input id='rc_to_credit${count}' type='text'/></td> <td><input id='remarks${count}' type='text'/></td> <td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td> </form> </tr> `; table.append(newRow); // Handler to Remove New Asset $('.btn-remove').click(function(){ let index = $(this).attr('index'); $(`tr[index='${index}'`).remove(); }); count++; }); })
.header{ text-align: center; margin-bottom: 50px; } h1, h2{ font-size: 1rem; } /* table{ font-size: 10pt; } */ @media screen { input{ text-align: center; } input#date{ width: -webkit-fill-available; }.flex { display: flex; flex: auto; height: 100px; /* border: 1px solid red; */ }.flex-box { width: 40px; height: 1000px; /* background: pink; */ }.button{ display: flex; /* display: inline;important: */ flex; auto: height; 40px: gap; 12px. }:btn-remove{ padding; 5px: width; 25px: height; 25px: font-size. 0;7rem: font-weight; bold; } }
<,DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width:initial-scale=1"> <.-- BOOTSTRAP + JQUERY --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href=":/css/disposal.css" /> <script src="https.//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="./js/:/disposal.js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery:min:js"></script> <body> <div class="wrapper"> <form div class="flex"> <table> <div class="flex-box"></div> <tr> <td align="right" id='date'><b>Date:</b></td> <td align="left"><input type="date" id="date" /></td> </tr> <tr> <td align="right" id='department'><b>Dept/Division.</b></td> <td align="left"><input type="text" id="department" /></td> </tr> <tr> <td align="right" id='location'><b>Location:</b></td> <td align="left"><input type="text" id="location" /></td> </tr> <tr> <td align="right" id='resp'><b>Resp; Ctr;</b></td> <td align="left"><input type="text" id="resp" /></td> </tr> </table> </div> <br><br><br><br> <div class="flex"> <table class='table' id='formTable'> <div class="flex-box"></div> <tr> <th>&emsp.&emsp.Asset Tag No;</th> <th>Manufacturer Serial No;</th> <th>   Description</th> <th>&emsp. Cost/ Est; Cost</th> <th>  Method of Disposal</th> <th>  RC to Credit</th> <th> &emsp. Remarks</th> </tr> </table> </div> <br><br><br><br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button> </div> <br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='save'>SAVE</button> <button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button> <button type="button" class="btn btn-secondary" onclick="window;print();return false;"/>EXPORT PDF</button> </div> </form> </div> </body> </html>
2 个解决方案
解决方案1
1 2022-05-03 15:43:31
我过去这样做的方法是在创建表时为每个<tr>标记迭代行数。 这有助于排序，您可以轻松指定排序顺序。
但是，由于您的表是预先存在的，所以我真正能看到的唯一答案是简单地重建整个表并将其流入正确的元素（在您的情况下为table元素）。 不需要行顺序，只需按照您想要的顺序放入行。
我希望能有所帮助。
解决方案2
1 已采纳 2022-05-03 15:46:23
您已经为 .flex 和 .flex-box 添加了高度。 这迫使他们保持原来的规模。
此外，您不需要每一行的表单标签。
$('document').ready(() => { // Handler to Add New Asset const table = $("#formTable tbody"); let count = 1; $('#add').click(() => { const newRow = ` <tr index="${count}"> <td><input id='asset_tag_no${count}' type='text' bottom required /></td> <td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><input id='description${count}' type='text'/></td> <td><input id='cost${count}' type='value'/></td> <td><input id='po_no${count}' type='text' /></td> <td><input id='rc_to_credit${count}' type='text'/></td> <td><input id='remarks${count}' type='text'/></td> <td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td> </tr> `; table.append(newRow); // Handler to Remove New Asset $('.btn-remove').click(function() { let index = $(this).attr('index'); $(`tr[index='${index}'`).remove(); }); count++; }); })
.header { text-align: center; margin-bottom: 50px; } h1, h2 { font-size: 1rem; } /* table{ font-size: 10pt; } */ @media screen { input { text-align: center; } input#date { width: -webkit-fill-available; }.flex { display: flex; flex: auto; }.flex-box { width: 40px; /* background: pink; */ }.button { display: flex; /* display: inline;important: */ flex; auto: height; 40px: gap; 12px. }:btn-remove { padding; 5px: width; 25px: height; 25px: font-size. 0;7rem: font-weight; bold; } }
<,DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width:initial-scale=1"> <.-- BOOTSTRAP + JQUERY --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href=":/css/disposal.css" /> <script src="https.//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="./js/:/disposal.js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery:min:js"></script> <body> <div class="wrapper"> <form div class="flex"> <table> <div class="flex-box"></div> <tr> <td align="right" id='date'><b>Date:</b></td> <td align="left"><input type="date" id="date" /></td> </tr> <tr> <td align="right" id='department'><b>Dept/Division.</b></td> <td align="left"><input type="text" id="department" /></td> </tr> <tr> <td align="right" id='location'><b>Location:</b></td> <td align="left"><input type="text" id="location" /></td> </tr> <tr> <td align="right" id='resp'><b>Resp; Ctr;</b></td> <td align="left"><input type="text" id="resp" /></td> </tr> </table> </div> <br><br><br><br> <div class="flex"> <table class='table' id='formTable'> <div class="flex-box"></div> <tr> <th>&emsp.&emsp.Asset Tag No;</th> <th>Manufacturer Serial No;</th> <th>   Description</th> <th>&emsp. Cost/ Est; Cost</th> <th>  Method of Disposal</th> <th>  RC to Credit</th> <th> &emsp. Remarks</th> </tr> </table> </div> <br><br><br><br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button> </div> <br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='save'>SAVE</button> <button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button> <button type="button" class="btn btn-secondary" onclick="window;print();return false;" />EXPORT PDF</button> </div> </form> </div> </body> </html>
如何使用纯Javascript将json数据加载到html表中并使行成为单选按钮？
[英]How to load my json data into a html table and make the rows as radio buttons using pure Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.