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

时间：2017-11-11 13:23:01

标签： javascript jquery html css

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

添加/删除脚本：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

4 个答案:

答案 0 :(得分：1)

删除时只需对行进行长度检查

＆＃13;
＆＃13; 
function deleteRow(row)
{
  var x=document.getElementById('POITable');
  var len = x.rows.length;
  if(len>2){
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
  }
  else{
    alert("Can't delete the first row");
  }
}

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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

只需使用单独的thead和tbody部分创建表格，例如移动ID属性＆＃34; POITable＆＃34; to tbody，你的JS代码可以正常运行...... 

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody id="POITable>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

答案 3 :(得分：0)

我不确定你的问题是否正确。

<强>然而。我的解决方案是：

我确定你无法阻止该行的显示。但使用这样的代码应该会有所帮助：

1.Step： 隐藏第一行： 

$("table tr:eq(1) td:eq(3) input").css("display","none");

2.Step： 显示新创建的tr： 

var nothing = $("#yourtable tr").length-1;
$("table tr:eq("+ nothing +") td:eq(3) input").css("display","block");
相关问题
最新问题