js动态添加trtd

<form id="addNewsFormData" name="addNewsFormData" isCheck="true" action="controller.SysRuleModelController">
 <table id="addNewsTableId" class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1" >
<tr>
  <th> 类型:</th>
  <td > 
          <select id="dtomodelType" name="modelType">
              <option value="1" >业务模型</option>
              <option value="2" >实体类</option>
          </select>
  </td>
  <th> 中文名 :</th>
  <td > 
  <input type="text" class="text" id="dtochName" name="chName" notNull="false" maxLength="50" value="" />
  </td>
  <th> 英文名 :</th>
  <td > 
  <input type="text" class="text" id="dtoenName" name="enName" notNull="false" maxLength="100" value="" />
  </td>
</tr>
<tr>
  <th> 备注 :</th>
  <td colspan="5"> 
  <textarea id="dtoremark" name="remark" maxLength="100" rows="5" cols="60"></textarea>
  </td>
</tr>
  </table>

属性管理
<div class="contentPanel">
    <table id="tab"  class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1">
            <tr>
                <td style="width: 5px;">序号</td>
                <td>属性中文名</td>
                <td>属性英文名</td>
                <td>数据类型</td>
                <td>长度</td>
                <td>引用字典编码</td>
                <td>描述</td>
                <td>操作</td>
           </tr>
           <tr id="1">
                <td><input type="text" name="modelAttrs[0].sequence" value="1"></td>
                <td><input type="text"  class="text" name="modelAttrs[0].chName" notNull="false" maxLength="50" value="" ></td>
                <td><input type="text"  class="text" name="modelAttrs[0].enName" notNull="false" maxLength="100" value="" ></td>
                <td>
                    <select name="modelAttrs[0].dataType" >
                        <option value="1" >字符型</option>
                        <option value="2" >数字型</option>
                        <option value="3" >日期型</option>
                        <option value="4" >浮点型</option>
                    </select>
                </td>
                <td><input type="text"  class="text" name="modelAttrs[0].dataLong" maxLength="50" value="" ></td>
                <td><input type="text"  class="text" name="modelAttrs[0].dictCode" maxLength="50" value="" ></td>
                <td><input type="text"  class="text" name="modelAttrs[0].remark" maxLength="50" value="" ></td>
                <td><a href="#" onclick="deltr(1)">删除</a></td>
           </tr>
        </table>
        <table class="formTableSwap" border="0" align="center" cellpadding="0" cellspacing="1">
            <tr><td style="text-align:right;width: 800px;"><input type="button" id="but" value="增加"/></td></tr>
        </table>

</form>

</div>

</body>
<script type="text/javascript">
   $(document).ready(function(){  
       //增加<tr/>
    $("#but").click(function(){
        var _len = $("#tab tr").length;
        alert(_len)
        $("#tab").append("<tr id="+_len+" align='center'>"
                            +'<td><input type="text" name="modelAttrs['+(_len-1)+'].sequence" value="'+_len+'"></td>'
                            +'<td><input type="text"  class="text" name="modelAttrs['+(_len-1)+'].chName" notNull="false" maxLength="50" value="" ></td>'
                            +'<td><input type="text"  class="text" name="modelAttrs['+(_len-1)+'].enName" notNull="false" maxLength="100" value="" ></td>'
                            +'<td><select name="modelAttrs['+(_len-1)+'].dataType">'
                            +'<option value="1" >数字型</option>'
                            +'<option value="2" >字符型</option>'
                            +'<option value="3" >日期型</option>'
                            +'<option value="4" >浮点型</option>'
                            +'</select></td>'
                            +'<td><input type="text"  class="text" name="modelAttrs['+(_len-1)+'].dataLong"  maxLength="50" value="" ></td>'
                            +'<td><input type="text"  class="text" name="modelAttrs['+(_len-1)+'].dictCode"  maxLength="50" value="" ></td>'
                            +'<td><input type="text"  class="text" name="modelAttrs['+(_len-1)+'].remark" maxLength="50" value="" ></td>'
                            +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"
                        +"</tr>");            
    });
    
    });


//删除<tr/>
function deltr(index){
//var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
}

 

 

posted @ 2016-02-16 09:35  也许还年轻  阅读(13616)  评论(0编辑  收藏  举报