js实现按钮添加和删除tr

截图

 

 前端代码

 <form name="form1" method="post" action="pMmEquipMent2!saveMmEqiup.action" id="form1">
    <s:hidden key="vo.id"/>
    <s:hidden key="vo.dock"></s:hidden>
     <s:hidden key="act"/>
    <div>
        <table cellpadding="0" border="0" cellspacing="0" class="edittable" id="table1">
            <tbody id="tbody">
                
            </tbody>
        </table>
        <br />
        <input type="button" value="增加" onclick="f_addTr()"></input>
    </div> 
    </form>

 

//添加tr
function f_addTr(){ 
             var allTr = $("#table1 tbody tr");
             if(allTr && allTr.length != 0 && allTr != null && allTr != ""){
                 var addEquip = $("tr:last:").children('td').eq(1).find("input[name=equipmentIds]");
                 var equipmentId = $(addEquip).val();
                     if(!equipmentId || equipmentId <= 0 || equipmentId == null || equipmentId==""){
                         alert("设备有空值请先选择");
                         return;
                  }
             }
                var html = '<tr>' 
                /* +'<td style="padding-top: 10px;">设备类型：</td>'
                +'<td><select style="width:120px" name="selectNames" class="selectName" onchange="addEquip(this)"></select>&nbsp;&nbsp;</td>' */
                +'<td style="padding-top: 10px;">设备：</td>'
                +'<td ><input type="text" name="equipNames" style="width:260px" class="equipAlias" onclick="f_addEquip(this)"><input type="hidden" name="equipmentIds">&nbsp;&nbsp;</td>'
                +'<td>位号：</td>'
                +'<td><input type="text" name="tags" style="width:150px" calss="tags"><input type="hidden" name="tagIds"></td>'
                +'<td>&nbsp;&nbsp;<input type="button" value="删除" onclick="deleteTr(this)"></td>'
                +'</tr>'
              $("#tbody").append(html);
              //f_addSelect();
              var $equipAlias = $("tr:last:").children('td').eq(1).find("input[name=equipNames]");
              f_addEquip($equipAlias);
          } 

 

//设备自动完成功能
function f_addEquip(obj){
              //var equipAlias = $("tr:last:").children('td').eq(1).find("input[name=equipNames]");
             var tr = $(obj).parent().parent();
              var equipAlias = tr.children("td").eq(1).find("input[name=equipNames]");
              var tags = tr.children("td").eq(3).find("input[name=tags]");
               var tagIds = tr.children("td").eq(3).find("input[name=tagIds]");
               var equipmentIds = tr.children("td").eq(1).find("input[name=equipmentIds]");
             //var tags = $("tr:last:").children("td").eq(3).find("input[name=tags]");
             //var tagIds = $("tr:last:").children("td").eq(3).find("input[name=tagIds]");
             //var equipmentIds = $("tr:last:").children("td").eq(1).find("input[name=equipmentIds]");
            // $(".equipAlias").flushCache();
             //$(equipAlias).val("");
             //$(equipmentIds).val("");
             //$(tags).val("");
             //$(tagIds).val("");
             $(equipAlias).flushCache();
             $(tags).flushCache();
             $(equipAlias).autocomplete("${ctx}/mm/pMmEquipMent2!findEquipAlias.action",{
                    max: 30,                //列表里的条目数
                    minChars: 0,            //自动完成激活之前填入的最小字符
                    width: 260,             //提示的宽度，溢出隐藏
                    scrollHeight: 300,      //提示的高度，溢出显示滚动条
                    matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                    autoFill: false,        //自动填充
                    mustMatch:true,         //true：只会允许匹配的结果出现在输入框，默认为false
                    dataType: "json",
                    multiple: false,     //是否多个值（“，”隔开）
                    matchSubset:true,
                    extraParams: {
                        //equipTypeId: function(){return $(obj).val();},
                        equipAlias: function(){ return encodeURIComponent($(equipAlias).val()); }
                    },
                    parse: function(data) {
                        var datas = new Array();
                        if(data !=null && data.length > 0){
                            $.each(data, function(i,item) {
                                var _data = {
                                        data:item,
                                        value:item.name,
                                        result:item.name
                                }
                                datas.push(_data);
                            })
                        }
                        return datas;
                    },
                    formatItem: function(row, i, max) {
                        return row.name;
                    },
                    formatResult: function(row) {
                        return row.name;
                    }
                    
                 }).result(function(e, item, value) {
                     //var equipmentIds = tr.children("td").eq(3).find("input[name=equipmentIds]");
                     $(equipmentIds).val(item.id);
                     f_selectTags(tags, tagIds, item.id);
                });
        }

 

//位号自动完成功能
function  f_selectTags(tags, tagIds, equipMentId){
            //var equipmentIds = tr.children("td").eq(5).find("input[name=tags]");
             $(tags).val("");
             $(tagIds).val("");
             //$(equipAlias).flushCache();
             $(tags).flushCache();
             $(tags).autocomplete("${ctx}/mm/pMmEquipMent2!findTags.action",{
                 max: 30,                //列表里的条目数
                 minChars: 0,            //自动完成激活之前填入的最小字符
                 width: 182,             //提示的宽度，溢出隐藏
                 scrollHeight: 300,      //提示的高度，溢出显示滚动条
                 matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                 autoFill: false,        //自动填充
                 mustMatch:true,         //true：只会允许匹配的结果出现在输入框，默认为false
                 dataType: "json",
                 multiple: false,     //是否多个值（“，”隔开）
                 matchSubset:true,
                 extraParams: {
                     equipMentId: function(){return equipMentId;},
                     tagName: function(){ return encodeURIComponent($(tags).val()); }
                 },
                 parse: function(data) {
                     var datas = new Array();
                     if(data !=null && data.length > 0){
                         $.each(data, function(i,item) {
                             var _data = {
                                     data:item,
                                     value:item.name,
                                     result:item.name
                             }
                             datas.push(_data);
                         })
                     }
                     return datas;
                 },
                 formatItem: function(row, i, max) {
                     return row.name;
                 },
                 formatResult: function(row) {
                     return row.name;
                 }
                 
              }).result(function(e, item, value) {
                  //var equipmentIds = tr.children("td").eq(3).find("input[name=equipmentIds]");
                   $(tagIds).val(item.id);
                  //f_selectTags(tags, tagIds, item.id);
             });
        }

 

//删除对应tr
          function deleteTr(obj){
             $(obj).parent().parent().parent()[0].removeChild($(obj).parent().parent()[0]);
          }