动态表格

最新推荐文章于 2024-10-17 13:46:19 发布

原创最新推荐文章于 2024-10-17 13:46:19 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #delete #function #table #insert

JAVASCRIPT学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现HTML表格的动态行和单元格的插入、修改与删除功能，包括输入框动态添加、内容修改、删除操作及相应的错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Table Cell Fun</title>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
</head>
 
<body>
 
 
 
<table id="table1" border="1">
 
<tr id="row1">
 
   <td id="cell1">Cell 1</td>
 
   <td id="cell2">Cell 2</td>
 
</tr>
 
<tr id="row2">
 
   <td id="cell3">Cell 3</td>
 
   <td id="cell4">Cell 4</td>
 
</tr>
 
</table>
 
 
 
<script type="text/javascript"> 
 
<!--
 
var theTable = document.getElementById("table1");   
 
function doRowInsert(row)
 
{
 
  var rowNumber = parseFloat(row);
 
  if ((rowNumber >= 0) && (rowNumber <= theTable.rows.length))
 
   theTable.insertRow(rowNumber);
 
}
 
   
 
function doCellInsert(row,column)
 
{
 
 var rowNumber = parseFloat(row);
 
 var colNumber = parseFloat(column);
 
 var numberRowsInTable = theTable.rows.length;
 
 if ((rowNumber >= 0 ) && (colNumber >= 0))
 
  {
 
   if (rowNumber >= numberRowsInTable)
 
    {
 
     alert("Can't add beyond defined rows");
 
     return;
 
    }      
 
   if (colNumber > theTable.rows[rowNumber].cells.length)
 
    {
 
     alert("Can't add more than one beyond columns");
 
     return;
 
    }  
 
var newtd = theTable.rows[rowNumber].insertCell(colNumber); 
		newtd.innerHTML = "<input type='text' name='tdinput' value='NEW TD'>";
  }
 
}
 
   
 
function doCellModification(row,column,newValue)
 
{
 
 var rowNumber = parseFloat(row);
 
 var colNumber = parseFloat(column);
 
 var numberRowsInTable = theTable.rows.length;
 
 if ((rowNumber >= 0 ) && (colNumber >= 0))
 
  {
 
   if (rowNumber >= numberRowsInTable)
 
    {
 
     alert("Can't modify cells outside the table");
 
     return;
 
    }      
 
   if (colNumber >= theTable.rows[rowNumber].cells.length)
 
    {
 
     alert("Can't modify cells outside the table");
 
     return;
 
    }  
 
   theTable.rows[rowNumber].cells[colNumber].innerHTML = newValue; 
 
  }
 
}
 
   
 
function doCellDelete(row,column)
 
{
 
  var rowNumber = parseFloat(row);
 
  var colNumber = parseFloat(column);
 
  var numberRowsInTable = theTable.rows.length;
 
  if ((rowNumber >= 0 ) && (colNumber >= 0))
 
  {
 
   if (rowNumber >= numberRowsInTable)
 
    {
 
     alert("Can't delete beyond defined rows");
 
     return;
 
    }      
 
   if (colNumber >= theTable.rows[rowNumber].cells.length)
 
    {
 
     alert("Can't delete beyond the column");
 
     return;
 
    } 
 
 
 
   theTable.rows[rowNumber].deleteCell(colNumber); 
 
  }
 
}
 
 
function doRowDelete(row)
{
		var rowNumber = parseFloat(row);
		 var numberRowsInTable = theTable.rows.length;
		
		if (rowNumber >= numberRowsInTable)
    {
 
     alert("Can't delete beyond defined rows");
 
     return;
 
    }
    else
    {
    	theTable.rows[rowNumber].removeNode(true);
    	numberRowsInTable--;
    }     
    
}
 
//-->
 
</script>
 
<form name="testForm" id="testForm" action="#" method="get">
 
 
 
Row #: <input type="text" name="rowtoinsert" id="rowtoinsert" size="2"
 
maxlength="2" value="1" />
 
<input type="button" value="Insert Row"
 
 onclick="doRowInsert(document.testForm.rowtoinsert.value);" /><br />
 
Row #: <input type="text" name="insertionRow" id="insertionRow" size="2"
 
 maxlength="2" value="0" />
 
Column #: <input type="text" name="insertionColumn" id="insertionColumn" size="2"
 
 maxlength="2" value="0" />
 
<input type="button" value="Insert Cell"
 
 onclick="doCellInsert(document.testForm.insertionRow.value,document.testForm.
 
insertionColumn.value);" /><br />
 
Row #: <input type="text" name="modifyRow" id="modifyRow" size="2" maxlength="2"
 
 value="0" />
 
Column #: <input type="text" name="modifyColumn" id="modifyColumn" size="2"
 
 maxlength="2" value="0" />
 
New Contents: <input type="text" name="newContents" id="newContents" size="20"
 
 maxlength="20" value="" />
 
<input type="button" value="Modify Cell Contents"
 
 onclick="doCellModification(document.testForm.modifyRow.value,document.testForm.
 
 modifyColumn.value,document.testForm.newContents.value);" /><br />
 
Row #: <input type="text" name="deletionRow" id="deletionRow" size="2"
 
 maxlength="2" value="0" />
 
Column #: <input type="text" name="deletionColumn" id="deletionColumn" size="2"
 
 maxlength="2" value="0" />
 
<input type="button" value="Delete Cell"
 
 onclick="doCellDelete(document.testForm.deletionRow.value,document.testForm.
 
deletionColumn.value);" /><br />
 
 
Row #: <input type="text" name="deletRow" id="deletRow" size="2"
 
 maxlength="2" value="0" />
<input type="button" value="Delete ROW"
 
 onclick="doRowDelete(document.testForm.deletRow.value);" /><br />
 
</form>
 
</body>
 
</html>