Question

所以我想创建一个html，它将用红线和绿线创建一个10x10表格。此后将出现一个弹出窗口，要求用户输入一个单词，并且该单词只会显示在红色处广场。我设法创建了表格和弹出窗口，但我不知道如何使它们交互。我也只能使用html，javascript和php。我编写的代码如下：

<body onload='myFunction()'>
  <?php echo "<table border =\"4\" style='border-color:blue;'>";
  for ($row=1; $row <= 10; $row++) {
    for ($col=1; $col <= 10; $col++) {
       if ($row%2==0) {
       echo "<td span style='border: 2px solid white;background-color: green'  height='50' width='50'></td /span> \n";}
       else {
         echo "<td span style='border: 2px solid white; background-color: red' height='50' width='50'></td /span> \n";
       }
        }
          echo "</tr>";
    }
    echo "</table>";?>
    <script>
      function myFunction() {
      var person = prompt("Εισαγεται εναν χαρακτηρα", "tsa");
      return person;
    }
</script>

</body>

Answer 1

最简单的方法是使用JavaScript。顺便说一句。不使用老式活动，现代浏览器支持addEventListener。

document.addEventListener('DOMContentLoaded', evt =>
{
  let table = document.createElement('table');
  table.innerHTML = ('<tr>' + ('<td></td>'.repeat(10)) + '</tr>').repeat(10);
  document.getElementById('table-container').appendChild(table);

  let person = prompt("Εισαγεται εναν χαρακτηρα", "tsa");

  table.querySelectorAll('tr:nth-child(2n+1)>td').forEach(td => td.innerText = person);
});

table
{
  border: 4px solid blue;
}

td
{
  border: 2px solid white;
  background-color: green;
  height: 50px;
  width: 50px;
}

tr:nth-child(2n+1)>td
{
  background-color: red;
}

<!DOCTYPE html>
<html lang=en>

<head><title>Table</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="table-container"></div>
  <script src="javascript.js"></script>
</body>

</html>

Answer 2

window.onload = buildTable;
        const submit = document.getElementById('submit'),
            cancel = document.getElementById('cancel'),
            myInput = document.getElementsByClassName('myInput')[0],
            myInputBg = document.getElementsByClassName('myInputBg')[0];
        let currentIndex = '',
            currentValue = '';

        submit.addEventListener('click', handleSubmit, false);
        cancel.addEventListener('click', handleCancel, false);
        
        function buildTable() {
            const myTableDiv = document.getElementById('myDynamicTable');
            let table = '<table id="myTable"><tbody>';
            let tr = '';

            for(let i = 0; i < 10; i += 1) {
                tr += `<tr data-row=${i} colspan="1">`;
                let td = '';
                for(let j = 0; j < 10; j += 1) {
                    td += `<td data-col=${j} id="td-${ (10 * i) + j + 1 }" rowspan="1" data-index=${ (10 * i) + j + 1 }></td>`;
                }
                tr += td + '</tr>';
            }
            table += table + tr + '</tbody><table>';
            myTableDiv.innerHTML = table;

            const myTds = document.querySelectorAll('td');
            myTds.forEach( td => td.addEventListener('click', handleTableChange, false) );
        }

        function handleTableChange(event) {
            const myIndex = event.target.dataset.index;
            const value = event.target.innerText;

            openInputEditor(myIndex, value);
        }

        function openInputEditor(index, value) {
            myInputBg.style.display = 'block';
            myInput.style.display = 'flex';
            currentIndex = index;
            currentValue = value;
            document.getElementById('myInputData').value = value;
        }

        function handleSubmit() {
            const inputVal = document.getElementById('myInputData');
            if(!inputVal.value) return;
            document.querySelector(`#td-${currentIndex}`).innerText = inputVal.value;
            handleCancel();
        }

        function handleCancel() {
            myInputBg.style.display = 'none';
            myInput.style.display = 'none';
        }

*{
    box-sizing: border-box;
}
#myDynamicTable {
    position: absolute;
    z-index: 1;;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
table {
    width: 100%;
    height: 100%;
    border-spacing: 1px;
}
table tr:nth-child(even) td{
    border: 1px solid green;
}
table tr:nth-child(odd) td{
    border: 1px solid red;
  }
  td {
      width: 40px;
      height: 40px;
      max-width: 40px;
      max-height: 40px;
      font-size: 14px;
      color: #444;
      cursor: pointer;
      outline: none;
      text-align: center;
      overflow: hidden;
      background: #f4f4f4;
  }
  .myInput {
      position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 3;
    background: #fff;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#myInputData {
    width: 90%;
    margin: 10px auto;
    min-height: 80px;
    padding: 10px;
}
button {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    text-align: center;
    outline: none;
    border-radius: 4px;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
}
button#submit {
    color: #fff;
    background: #009688;
}
button#submit :hover {
    border: 1px solid #009888;
}
button#cancel {
    color: rgba(0, 0, 0, 0.8);
    background: #f8f8f8;
}
button#cancel:hover {
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.myInputBg {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0; 
    z-index: 2;
}

<div class="myInputBg"></div>
<div id="myDynamicTable"></div>
<div class="myInput">
    <textarea id="myInputData"></textarea>
    <div>
        <button id="submit">Submit</button>
        <button id="cancel">Cancel</button>
    </div>
</div>

我需要创建一个表，以便用户可以填写他想要的内容

2 个答案: