Javascript 按钮未放置在html dis位置

发布于04月18日

我有一个JavaScript生成的表，用户可以与之交互.输入该表，生成后，应该会显示一个按钮，所以我的css文件中有初始化后的display: none.

function createTable(row, col, playerNames) {
    const tbl = document.getElementById("table")
    const tblBody = document.getElementById("tbody")

    // Creating cells
    for (let i = 0; i < row; i++) {
        const row = document.createElement("tr")

        for (let j = 0; j < col; j++) {
            const cell = document.createElement("td")
            if (i == 0 && j == 0) {
                // Create "Runden" cell
                const cellText = document.createTextNode("Runden")
                cell.appendChild(cellText)
            } else if (i == 0 && j != 0) {
                // Create cells with player names in first row
                const cellText = document.createTextNode(playerNames[j])
                cell.appendChild(cellText)
            } else if (i != 0 && j == 0) {
                // Create round counter cells
                const cellText = document.createTextNode(String(i))
                cell.appendChild(cellText)
            } else {
                // Create rest of the cells
                cell.contentEditable = "true"
            }
            row.appendChild(cell)
        }
        if (tblBody) {
            tblBody.appendChild(row)
        }
    }
    if (tbl) {
        // @ts-ignore        
        tbl.appendChild(tblBody)
    }
    // @ts-ignore
    document.body.appendChild(tbl)

    addSumRowToTable(col)

    addEventListenerToTableDataCells()
    
    displayEventCardsButton()
}

function displayEventCardsButton() {
    let eventCardButton = document.getElementById("event_cards")

    if (eventCardButton) {
        eventCardButton.style.display = "block"
    }

}

 <div id="player_count_heading">Anzahl der Spieler eingeben</div>
 <div>
     <table id="table">
         <tbody id="tbody"></tbody>
     </table>
 </div>

 <div class="buttons">
     <button id="player_count" type="button">Spieleranzahl</button>
     <button id="event_cards" type="button">Ereigniskarten</button>
 </div>
  
 <script src="js/frantic.js"></script>

使用此代码，生成表后会显示按钮，但它始终出现在表上方.按钮的分区位于下方，按钮也应该如此？

我首先用JavaScript创建了整个表，但遇到这个问题后，我try 通过在html文件中清晰地定位dis容器来解决它.但这也行不通.

是否有任何特定于JavaScript/HTML的因素会导致这种行为？

工作片段

这是更新后的片段.我重新命名了一些变量，将其称为append而不是appendChild，并使用textContent来简化您的逻辑.

createTable(10, 5, ["Ann", "Joe", "Mike", "Sam"]);

function createTable(rowCount, colCount, playerNames) {
  const table = document.querySelector("#grid");
  let tbody = table.querySelector("tbody");
  if (tbody == null) {
    tbody = document.createElement("tbody");
    table.append(tbody);
  }

  // Populate the table with data
  for (let rowIndex = 0; rowIndex <= rowCount; rowIndex++) {
    const tr = document.createElement("tr");
    for (let colIndex = 0; colIndex < colCount; colIndex++) {
      const td = document.createElement("td");
      if (rowIndex == 0 && colIndex == 0) {
        td.textContent = "Round";
      } else if (rowIndex == 0 && colIndex != 0) {
        // Create cells with player names in first row
        td.textContent = playerNames[colIndex - 1];
      } else if (rowIndex != 0 && colIndex == 0) {
        // Create round counter cells
        td.textContent = rowIndex;
      } else {
        // Create rest of the cells
        td.contentEditable = true;
      }
      tr.append(td);
    }
    tbody.append(tr);
  }
  addSumRowToTable(tbody, colCount);
  addEventListenerToTableDataCells();
  displayEventCardsButton();
}

function addSumRowToTable(tbody, colCount) {
  const tr = document.createElement("tr");
  for (let colIndex = 0; colIndex < colCount; colIndex++) {
    const td = document.createElement("td");
    if (colIndex === 0) {
      td.textContent = "Sum";
    } else {
      td.textContent = "$";
    }
    tr.append(td);
  }
  tbody.append(tr);
}

function addEventListenerToTableDataCells() {
  // Not implemented
}

function displayEventCardsButton() {
  let eventCardButton = document.getElementById("event_cards");

  if (eventCardButton) {
    eventCardButton.style.display = "block";
  }
}

table#grid {
  border-collapse: collapse;
}

table#grid, table#grid td {
  border: thin solid grey;
}

table#grid td {
  padding: 0.25rem;
}

table#grid tr td:first-child {
  text-align: right;
}

<div id="player_count_heading">Anzahl der Spieler eingeben</div>
<div>
  <table id="grid"></table>
</div>

<div class="buttons">
  <button id="player_count" type="button">Spieleranzahl</button>
  <button id="event_cards" type="button">Ereigniskarten</button>
</div>

<script src="js/frantic.js"></script>

更好的方式

不过，这是一个更好的方法.您还应该利用<thead>、<tfoot>和<th>个元素.此外，如果您的函数名为"SEARCH X"，则它可能应该创建并返回一些内容.

const existingTable = document.querySelector("#grid");
const table = createTable(["Ann", "Joe", "Mike", "Sam"], 10);
table.id = existingTable.id;
existingTable.replaceWith(table);

function createTable(playerNames, rounds) {
  const table = document.createElement("table");
  const thead = document.createElement("thead");
  const tbody = document.createElement("tbody");
  const tfoot = document.createElement("tfoot");

  const colCount = playerNames.length + 1;

  const headerRow = document.createElement("tr");
  for (let colIndex = 0; colIndex < colCount; colIndex++) {
    const header = document.createElement("th");
    header.textContent = colIndex === 0 ? "Round" : playerNames[colIndex - 1];
    headerRow.append(header);
  }
  thead.append(headerRow);

  // Populate the table with data
  for (let rowIndex = 0; rowIndex < rounds; rowIndex++) {
    const tr = document.createElement("tr");
    for (let colIndex = 0; colIndex < colCount; colIndex++) {
      if (colIndex === 0) {
        // Create round counter cells
        const th = document.createElement("th");
        th.textContent = rowIndex + 1;
        tr.append(th);
      } else {
        // Create rest of the cells
        const td = document.createElement("td");
        td.contentEditable = true;
        tr.append(td);
      }
    }
    tbody.append(tr);
  }

  table.append(thead);
  table.append(tbody);
  table.append(tfoot);

  addSumRowToTable(tfoot, playerNames.length + 1);
  addEventListenerToTableDataCells();
  displayEventCardsButton();

  return table;
}

function addSumRowToTable(tfoot, colCount) {
  const tr = document.createElement("tr");
  for (let colIndex = 0; colIndex < colCount; colIndex++) {
    if (colIndex === 0) {
      // Create round counter cells
      const th = document.createElement("th");
      th.textContent = "Sum";
      tr.append(th);
    } else {
      // Create rest of the cells
      const td = document.createElement("td");
      td.textContent = "$";
      tr.append(td);
    }
  }
  tfoot.append(tr);
}

function addEventListenerToTableDataCells() {
  // Not implemented
}

function displayEventCardsButton() {
  let eventCardButton = document.getElementById("event_cards");

  if (eventCardButton) {
    eventCardButton.style.display = "block";
  }
}

table#grid {
  border-collapse: collapse;
}

table#grid, table#grid th, table#grid td {
  border: thin solid grey;
}

table#grid th, table#grid td {
  padding: 0.25rem;
}

table#grid tbody tr th:first-child {
  text-align: right;
  background: #EEE;
}

table#grid thead {
  background: #CCC;
}

table#grid tfoot {
  background: #EEE;
}

<div id="player_count_heading">Anzahl der Spieler eingeben</div>
<div>
  <table id="grid"></table>
</div>

<div class="buttons">
  <button id="player_count" type="button">Spieleranzahl</button>
  <button id="event_cards" type="button">Ereigniskarten</button>
</div>

<script src="js/frantic.js"></script>

Javascript 按钮未放置在html dis位置

推荐答案

工作片段

更好的方式

Javascript相关问答推荐

使用useParams路由失败

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

如何修复内容安全策略指令脚本-SRC自身错误？

我应该在redux reducer中调用其他reducer函数吗？

每次子路由重定向都会调用父加载器函数

被CSS优先级所迷惑

仅针对RTK查询中的未经授权的错误取消maxRetries

更改JSON中使用AJAX返回的图像的路径

如何在bslib nav_insert之后更改导航标签的CSS类和样式？

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

rxjs插入延迟数据

Use Location位置成员在HashRouter内为空

自定义确认组件未在vue.js的v菜单内打开

Next.js中的服务器端组件列表筛选

react 路由如何使用从加载器返回的数据

无法使用Redux异步函数读取未定义的useEffect钩子的属性'；map'；

在Press Reaction本机和EXPO av上播放单个文件

验证Java脚本函数中的两个变量

如何格式化API的响应