JavaScript操作table

<table align="center" id="mytable" border="1" width="50%">
	<tr>
		<td>
			内容
		</td>
		<td>
			类别
		</td>
		<td>
			操作
		</td>
	</tr>
</table>
<div align="center">
	内容：
	<input id="content" type="text" />
	类别：
	<input id="type" type="text" />
	<input id="submit" type="button" value="提交" οnclick="insertToRow()" />
</div>

<script>
function insertToRow()
{
	if (mytable.hasChildNodes())
	{
		var node = mytable.firstChild.lastChild;

		if (node.childNodes[1].innerText == type.value)
		{
			insertNewRow();
		}
		else
		{
			var flag = new Boolean(true);

			while (!(node == mytable.firstChild.firstChild || flag == false))
			{
				node = node.previousSibling;
				if (node.childNodes[1].innerText == type.value)
				{
					var tr = mytable.insertRow(node.rowIndex + 1);
					var tb1 = tr.insertCell();
					var tb2 = tr.insertCell();
					var tb3 = tr.insertCell();
					tb1.innerText = content.value;
					tb2.innerText = type.value;
					tb3.innerHTML = "<input value='删除' type='button' onClick='mytable.deleteRow(this.parentNode.parentNode.rowIndex)' />";
					flag = false;
					break;
				}
			}
			if (flag)
			{
				insertNewRow();
			}
		}
	}
	else
	{
		insertNewRow();
	}
}

function insertNewRow()
{
	var tr = mytable.insertRow();
	var tb1 = tr.insertCell();
	var tb2 = tr.insertCell();
	var tb3 = tr.insertCell();
	tb1.innerText = content.value;
	tb2.innerText = type.value;
	tb3.innerHTML = "<input value='删除' type='button' onClick='mytable.deleteRow(this.parentNode.parentNode.rowIndex)' />";
}
</script>

 

注意：FireFox和IE在这边上有差别，在ie上table下就是tr，而在ff下table下还有thead和tbody，tbody下才是tr，如果直接获取，则要判断，如果通过tr获取父节点，则可以直接用），然后通过par.removeChild(tr)来删除行。