javascript - 如何使用 javascript 和 html 防止表格中的第一行

Question

我有一个表，我在每一列中包含了删除按钮。我还包括了添加行按钮。我面临的问题是，如果我删除第一行，我将无法添加新行，或者让我知道如何限制用户删除第一行。我认为通过应用复选框，这样每当用户想要删除行时，他们都可以选中复选框并将其删除。

添加/删除脚本:

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('POITable').deleteRow(i);
}


function insRow() {
  console.log('hi');
  var x = document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  x.appendChild(new_row);
}

<table id="POITable">
  <tr>
    <th width="100px" style="display:none">SL.no</th>
    <th width="100px">col1</th>
    <th width="85px">col2</th>
    <th width="85px">col3</th>
    <th width="85px">col4</th>
    <th width="95px">col5</th>
    <th width="100px">Delete/<input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()" /></th>
  </tr>
  <tr>
    <td style="display:none">1</td>
    <td>
      <input type="text" id="txtAutoComplete" list="languageList" style="border:none;font-size:10pt;width:100px;" />
      <!--your input textbox-->
      <datalist id="languageList">
    <option value="Dddd" />
    <option value="DTdsds" />
    <option value="adsda" />
    <option value="adsadsad" />
    <option value="dadsada" />
    <option value="rsfsfsdfs" />
    <option value="Csffsf" />
    </datalist>
    </td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:80px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
  </tr>

  </tr>
</table>

Answer 1

最简单的方法是隐藏第一行，例如添加 style="display: none;" 到 tr。

然后可以通过使用 new_row.setAttribute( 'style', '' ); 删除样式来查看每个新克隆的行。

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('POITable').deleteRow(i);
}


function insRow() {
  console.log('creating new row...');
  var x = document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  
  // Remove styles of new row
  new_row.setAttribute( 'style', '' );
  x.appendChild(new_row);
}

<table id="POITable">
  <tr>
    <th width="100px" style="display:none">SL.no</th>
    <th width="100px">col1</th>
    <th width="85px">col2</th>
    <th width="85px">col3</th>
    <th width="85px">col4</th>
    <th width="95px">col5</th>
    <th width="100px">Delete/<input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()" />
    </th>
  </tr>
  <!-- hide first row by default -->
  <tr style="display: none">
    <td style="display:none">1</td>
    <td>
      <input type="text" id="txtAutoComplete" list="languageList" />
      <!--your input textbox-->
      <datalist id="languageList">
        <option value="Dddd" />
        <option value="DTdsds" />
        <option value="adsda" />
        <option value="adsadsad" />
        <option value="dadsada" />
        <option value="rsfsfsdfs" />
        <option value="Csffsf" />
      </datalist>
    </td>
    <td><input type="text" id="txtbox" name="name" style="width:80px;"></td>
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td>
    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
  </tr>

  </tr>
</table>