Jquery table 添加行 刪除行

    //添加行 js方法 
     function addTr2(tab, row){
            if($("#tab").find("tr").length > 31){
                alert('最多添加30條信息');
                return;
            };
            var trHtml="<tr class='item2list'>"
                trHtml+="<td><input class='txt3' type='text' name='productname' datatype='*' nullmsg='不能爲空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input class='txt3' type='text' name='spec' datatype='*' nullmsg='不能爲空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input class='txt3' type='text' name='num' value='1' datatype='*' nullmsg='不能爲空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input type='text' name='unit' class='txt3' datatype='*' nullmsg='不能爲空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><select class='privatePublic'><option>公</option><option>私</option></select></td>";
                trHtml+="<td><input type='text' name='productplace' class='txt3'/></td>";
                trHtml+=" <td><input type='text' name='productplace' class='txt3'/></td>";
                trHtml+=" <td><input type='text' name='remark' class='txt3'/></td>";
                trHtml+=" <td><input type='button' value='刪除行' onclick='deleteTr(this)'/></td>";
                trHtml+="</tr>"
                
            addTr(tab, row, trHtml);
          }

      function addTr(tab, row, trHtml){
             //獲取table最後一行 $("#tab tr:last")
             //獲取table第一行 $("#tab tr").eq(0)
             //獲取table倒數第二行 $("#tab tr").eq(-2)
         var $tr=$("#"+tab+" tr").eq(row);
         if($tr.size()==0){
            alert("指定的table id或行數不存在!");
            return;
         }
         $tr.after(trHtml);
      }
      
      //刪除表格中的指定行
        function deleteTr(obj) {
              $(obj).closest('tr').remove();
        }
      
      //操做的表格
      <table width="960" border="0" cellspacing="0" cellpadding="0" class="tab3" id="tab">
                    <tr>
                       <td>
                         <input type="button" value="添加行" onclick="addTr2('tab', -1)"/>
                          </td>
                    </tr>
              <tr>
                <th width="83">貨品名稱</th>
                <th width="87">貨品規格</th>
                <th width="68">數量</th>
                <th width="63">單位</th>
                <th width="87">公/私</th>
                <th width="83">採購單位</th>
                <th width="66">姓名</th>
                <th width="149">備註</th>
                <th width="70">&nbsp;</th>
              </tr>
              <tr class="item2list">
                <td>
                    <input class="txt3" type="text" name="productname" datatype="*" nullmsg="不能爲空" />
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input class="txt3" type="text" name="spec" datatype="*" nullmsg="不能爲空"/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input class='txt3' type='text'value="1" datatype="n" nullmsg="不能爲空" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name='num'/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input type="text" name="unit" class="txt3" datatype="*" nullmsg="不能爲空"/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <select class="privatePublic">
                        <option>公</option>
                        <option>私</option>
                    </select>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input type="text" name="productplace" class="txt3"/>
                </td>
                <td>
                    <input type="text" name="productplace" class="txt3"/>
                </td>
                <td>
                    <input type="text" name="remark" class="txt3"/>
                </td>
                <td>
                    <input type="button" value="刪除行" onclick="deleteTr(this)"/>
                </td>
              </tr>
           </table>
相關文章
相關標籤/搜索