Question

我的代码在这里：https://codepen.io/dotEthan/pen/xaJvXx

当我单击“创建行”时，将使用与行1中相同的数据来创建新行。我希望他如何查看的示例图片：i.imgur.com/WKpFFge.png

感谢助手！

Answer 1

出什么问题了？只需设置cell.innerHTML之类的正确值，例如<input...。
这行得通。

let depth = 0;
let count = 0;

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(0);
  var cell3 = row.insertCell(0);
  var cell4 = row.insertCell(0);
  var cell5 = row.insertCell(0);
  var cell6 = row.insertCell(0);
  var cell7 = row.insertCell(0);
  var cell8 = row.insertCell(0);
  cell1.innerHTML = 1 + count;
  cell2.innerHTML = '<input type="number" name="firstname" style="font: 12px \'Fira Sans\', sans-serif;width: 64px;margin: 0.4rem;text-align-last: center;">';
  cell3.innerHTML = '<input type="text" id="fname2" name="firstname" style="font: 12px \'Fira Sans\', sans-serif;width: 52px;margin: 0.4rem;text-align: right;">';
  cell4.innerHTML = '<input type="text" id="fname2" name="firstname" style="font: 12px \'Fira Sans\', sans-serif;width: 55px;margin: 0.4rem;text-align: right;">';
  cell5.innerHTML = '<fieldset><div><input type="date" name="trip" style="font: 12px \'Fira Sans\', sans-serif;width: 113px;margin: 0.4rem;"></div></fieldset>';
  cell6.innerHTML = '<fieldset><div><input type="date" name="trip" style="font: 12px \'Fira Sans\', sans-serif;width: 113px;margin: 0.4rem;"></div></fieldset>';
  cell7.innerHTML = '<input type="number" id="fname2" name="firstname" style="font: 12px \'Fira Sans\', sans-serif;width: 31px;margin: 0.4rem;text-align-last: center;">';
  cell8.innerHTML = '<select style="font: 12px \'Fira Sans\', sans-serif;width: 94px;margin: 0.4rem;text-align-last: right;"><option value="volvo">השתתפות</option><option value="saab">שוברים</option></select>';
  depth++;
  count++;
}

function myDeleteFunction() {
  if (depth > 0) {
    depth--;
    count--;
    document.getElementById("myTable").deleteRow(-1);

  }
}

table,
td {
  border: 1px solid black;
}

<table id="myTable" class="table table-bordered table-hover" style="font-size: 12px; font-family: Arial;">
  <thead>
    <tr>
      <th style="text-align: right;">השתתפות / שוברים</th>
      <th style="text-align: right;">סכ"ה ימים</th>
      <th style="text-align: right;">עד תאריך</th>
      <th style="text-align: right;">מתאריך</th>
      <th style="text-align: right;">שם משפחה</th>
      <th style="text-align: right;">שם פרטי</th>
      <th style="text-align: right;">מ.א</th>
      <th style="text-align: right;">number count</th>
    </tr>
  </thead>
  <tbody>

    <tr class="warning">
      <td style="text-align: center;">

        <select style="font: 12px 'Fira Sans', sans-serif;width: 94px;margin: 0.4rem;text-align-last: right;">
          <option value="volvo">השתתפות</option>
          <option value="saab">שוברים</option>
        </select>


      </td>
      <td style="text-align: right;"><input type="number" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 31px;margin: 0.4rem;text-align-last: center;"></td>
      <td style="text-align: right;">
        <fieldset>
          <div>
            <input type="date" name="trip" style="font: 12px 'Fira Sans', sans-serif;width: 113px;margin: 0.4rem;">
          </div>


        </fieldset>
      </td>


      <td style="text-align: right;">

        <fieldset>
          <div>
            <input type="date" name="trip" style="font: 12px 'Fira Sans', sans-serif;width: 113px;margin: 0.4rem;">
          </div>


        </fieldset>
      </td>
      <td style="text-align: right;">
        <input type="text" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 55px;margin: 0.4rem;text-align: right;">

      </td>
      <td style="text-align: right;">
        <input type="text" id="fname2" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 52px;margin: 0.4rem;text-align: right;">

      </td>
      <td id=check style="text-align: right;">
        <input type="number" name="firstname" style="font: 12px 'Fira Sans', sans-serif;width: 64px;margin: 0.4rem;text-align-last: center;">
      </td>
      <td class="count" style="text-align: center;padding-top: 20px;">1
      </td>
    </tr>
  </tbody>
</table>
<br><br>

<p id="demo" onclick="myCreateFunction()">Create row</p> <br>
<p id="demo" onclick="myDeleteFunction()">Delete row</p>

将元素复制到当前表中的新行

1 个答案: