js对table操作（增加删除交换上下TR）

最新推荐文章于 2020-12-13 15:19:38 发布

原创最新推荐文章于 2020-12-13 15:19:38 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js html

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个通过JavaScript实现的动态增删表格行的示例，主要应用于菜单管理系统的子菜单配置场景。用户可以添加、删除和调整子菜单项的位置。

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

<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="table_bg space_top" id="gallery-table">
<tr>
	<td width="3%" nowrap align=center  class="table_title">父菜单名称</td>
	<td align="center" class="table_title">子菜单</td>
	<td align="center" class="table_title">类型</td>
	<td align="center" class="table_title">菜单项值</td>
	<td align="center" class="table_title">操作</td>
</tr>
<tr class="1">
<td width="3%" nowrap="" align="center" class="table_title">》</td>
<td align="center" class="table_title">
<input type="text" onblur="if(this.value=='') this.value='请输入子菜单项' ;" onclick="if(this.value=='请输入子菜单项') this.value='' ;" value=""></td>
<td align="center" class="table_title">
<select>
<option   value="view">url</option>
<option   value="click">请求后台</option> 
</select></td>
<td align="center" class="table_title">
<input type="text" onblur="if(this.value=='')this.value='请输入子菜单项值';" onclick="if(this.value=='请输入子菜单项值')this.value='';" value=""></td>
<td align="center" class="table_title"> 
<a href="javascript:;" onclick="removeImg(this)" style="margin-left: 20px; font-size:14px;">[删除子菜单]</a>
/<a href="javascript:;" onclick="up(this)" style="margin-left: 20px; font-size:14px;">[up]</a> 
</td>
</tr>

<script type="text/javascript">
 var Browser = new Object();
Browser.isIE = window.ActiveXObject ? true : false;
 //获取行数
function rowindex(tr)
{
  if (Browser.isIE)
  {
    return tr.rowIndex;
  }
  else
  {
    table = tr.parentNode.parentNode;
    for (i = 0; i < table.rows.length; i ++ )
    {
      if (table.rows[i] == tr)
      {
        return i;
      }
    }
  }
}
//添加input
function addImg(obj)
{
  var src  = obj.parentNode.parentNode;
  src.cells[2].innerHTML='';
  src.cells[3].innerHTML='';
  var index = src.id;
  if($("."+index+"").size()>=5){
<span style="white-space:pre">	</span>   alert("子菜单最多只能5个！")
<span style="white-space:pre">	</span>   return ;
<span style="white-space:pre">	</span>  }
  var idx  = rowindex(src);
  var tbl  = document.getElementById('gallery-table');
  var row  = tbl.insertRow(idx + 1);
 // row.innerHTML=src.innerHTML.replace(/(.*)(addImg)(.*)(\[)(继续添加)/i, "$1removeImg$3$4删除");
<span style="white-space:pre">	</span> row.className=index;
<span style="white-space:pre">	</span> $(row).html('<td width="3%" nowrap align=center  class="table_title">》</td>'+
<span style="white-space:pre">				</span>'<td align="center" class="table_title"><input type="text"  onBlur="if(this.value=="")this.value="请输入子菜单项";" onclick="if(this.value=="请输入子菜单项")this.value="";" value="请输入子菜单项"/></td>'+
<span style="white-space:pre">				</span>'<td align="center" class="table_title">'+
<span style="white-space:pre">					</span>'<select >'+
<span style="white-space:pre">						</span>'<option value="view">url</option>'+
<span style="white-space:pre">						</span>'<option value="click">请求后台</option>'+
<span style="white-space:pre">					</span>' </select>'+
<span style="white-space:pre">				</span>'</td>'+
<span style="white-space:pre">				</span>'<td align="center" class="table_title"><input type="text"  onBlur="if(this.value=="")this.value="请输入子菜单项值";" onclick="if(this.value=="请输入子菜单项值")this.value="";" value="请输入子菜单项值"/></td>'+
<span style="white-space:pre">				</span>'<td align="center" class="table_title"> <a href="javascript:;" onClick="removeImg(this)" style="margin-left: 20px; font-size:14px;">[删除子菜单]</a> '+
<span style="white-space:pre">				</span>'/<a href="javascript:;" onclick="up(this)" style="margin-left: 20px; font-size:14px;">[up]</a>&nbsp;'+
<span style="white-space:pre">				</span>'</td>');


}

//交换上下TR
function up(obj){
<span style="white-space:pre">	</span>var table      = document.getElementById("gallery-table");
    var selectedTr =obj.parentNode.parentNode;
    var preTr      = selectedTr.previousElementSibling;
    if (preTr && preTr.id == "")
    {
        var selectedIndex = selectedTr.innerHTML;
        selectedTr.innerHTML = preTr.innerHTML;
        preTr.innerHTML = selectedIndex;
        table.insertBefore(selectedTr, preTr);
    }
}
//删除tr
function removeImg(obj)
{
<span style="white-space:pre">	</span>var index = obj.parentNode.parentNode.className;
  var row = rowindex(obj.parentNode.parentNode);
  var tbl = document.getElementById('gallery-table');
  tbl.deleteRow(row);


  if($("."+index).size()==0){
  <span style="white-space:pre">	</span>$("#"+index+" td:eq(2)").html('<select name="type"><option value="view">url</option><option value="click">发送消息</option></select>');
  <span style="white-space:pre">	</span>$("#"+index+" td:eq(3)").html('<input type="text" name="url" onBlur="if(this.value=="")this.value="请输入菜单项值";" onclick="if(this.value=="请输入菜单项值")this.value="";" value="请输入菜单项值"/>');
  }
  
}

<script>