js 动态增加行删除行兼容火狐和IE

最新推荐文章于 2020-12-08 11:38:59 发布
BenjaminDeng
最新推荐文章于 2020-12-08 11:38:59 发布
阅读量854
点赞数
分类专栏： html 文章标签： input search class button xhtml border
本文链接：https://blog.youkuaiyun.com/djchallenge/article/details/7309793
版权
html 专栏收录该内容
11 篇文章
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>

<script language="JavaScript">
function insertRow() {
    var num=0;
    for(num=0;num<10;num++){
        var x=document.getElementById('myTable');
        var nowrow = x.rows.length;
        if(nowrow < 101){
            var i = nowrow-1;
            var oneRow = x.insertRow(nowrow);
            var h1=oneRow.insertCell(0);
            var h2=oneRow.insertCell(1);
            var h3=oneRow.insertCell(2);
            var h4=oneRow.insertCell(3);
            var h5=oneRow.insertCell(4);
           
            h1.innerHTML = '<th>'+nowrow+'</th>';
            h2.innerHTML = "<input type='text' class='inputtext_style w81' style='ime-mode:disabled;' id='code' name='code' value='' maxlength='3'>";
            h3.innerHTML = "<span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span>"
            h4.innerHTML = "<input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'>";
            h5.innerHTML = "<input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'>";
            h1.bgColor = '#E4F1F9';
        }
    }
}

function deleteRow() {
	U= document.getElementById("myTable").rows.length-1;
	if(U>0){
		document.getElementById("myTable").deleteRow(U);
	} else{
		alert("最少保留一行") ;
	}
}

</script>
<form name="myForm">
<table id="myTable" border=1>
<tr οnclick="getIndex()">
	<tr>
        <th> </th>
        <th>カタログ<br />コード</th>
        <th>商品お申込番号</th>
        <th>数量</th>
        <th>コメント</th>
    </tr>
  	<tr>
		<th>1</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>2</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>3</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>4</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>5</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>6</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>7</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>8</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>9</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
  	<tr>
		<th>10</th>
		<td><input type="text" style="ime-mode:disabled;" value="" id="code" name="code" maxlength="3"></td>
		<td><span style='display:block;' id='spansku'><input type='text' id='skuid0' style='ime-mode:disabled;' maxlength='7'></span></td>
		<td><input id='count' type='text' style='ime-mode:disabled;' class='inputtext_style w43' maxlength='4'></td>
		<td><input id='comment' type='text' style='ime-mode:inactive;' maxlength='40'><input type='hidden' id='sku_id_search'></td>
	</tr>
</table>
<input type="button" οnclick="deleteRow()" value="减少一行">
<input type="button" οnclick="insertRow()" value="增加十行" >
</form>