js应用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript测试</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 如果用jQuery就把这行注释去掉 <script src="jquery.min.js"></script>-->
<script src="test.js"></script><!-- JS写到这里 -->
</head><body>
<div>
     <b>要求:</b>ID字段自增,页面初始只有标题行和第一条空信息行,点增加后在行尾增加一条空信息行,操作按钮变成(删除)ID列加1,点(删除)
        按钮时当前行被删除,ID列自动更新,所有操作用JavaScript完成,可以利用jQuery.
    </div>
<table border="0" cellpadding="0" cellspacing="0">
     <tr>
         <th >ID</th>
            <th>公司名称</th>
            <th>公司类别</th>
            <th>联系地址</th>
            <th>操作</th>
        </tr>
        <!-- 页面初始保留行 开始 -->
        <tr>
         <td>1</td>
            <td><input/></td>
            <td>
             <select>
                 <option selected>请选择</option>
                 <option>制造类</option>
                    <option>生产类</option>
                    <option>销售类</option>
                </select>
            </td>
            <td><input/></td>
            <td><button>增加</button></td>
        </tr>
        <!-- 页面初始保留行 结束 -->
        
        <!-- 添加行后的示例行 开始 -->
        <tr>
         <td>2</td>
            <td><input/></td>
            <td>
             <select>
                 <option selected>请选择</option>
                 <option>制造类</option>
                    <option>生产类</option>
                    <option>销售类</option>
                </select>
            </td>
            <td><input/></td>
            <td><button>删除</button></td>
        </tr>
        <!-- 添加行后的示例行 结束 -->
        
    </table>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <!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=utf-8" />
     <script type="text/javascript" src="Script/jquery-1.3.2.min.js"></script> 
     <title></title>
     <script>
         $(document).ready(function(){
             //<tr/>居中
            $("#tab tr").attr("align","center");
            
            //增加<tr/>
            $("#but").click(function(){
                var _len = $("#tab tr").length;        
                $("#tab").append("<tr id="+_len+" align='center'>"
                                    +"<td>"+_len+"</td>"
                                    + "<td><input type=\"text\" /></td>"
                                    + "<td><select><option selected>请选择</option><option>制造类</option><option>生产类</option><option>销售类</option></select></td>"
                                    +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
                                    + "<td><input type='button' value='删除' onclick=\'deltr(" + _len + ")\' /></td>"
                                +"</tr>");            
            })    
        })
        
        //删除<tr/>
        var deltr =function(index)
        {
            var _len = $("#tab tr").length;
            $("tr[id='"+index+"']").remove();//删除当前行
            for(var i=index+1,j=_len;i<j;i++)
            {
                var nextTxtVal = $("#desc"+i).val();
                $("tr[id=\'"+i+"\']")
                    .replaceWith("<tr id="+(i-1)+" align='center'>"
                                    +"<td>"+(i-1)+"</td>"
                                    + "<td><input type=\"text\" /></td>"
                                    + "<td><select><option selected>请选择</option><option>制造类</option><option>生产类</option><option>销售类</option></select></td>"
                                    + "<td><input type='text' name='desc" + (i - 1) + "' id='desc" + (i - 1) + "' /></td>"
                                    + "<td><input type='button' value='删除' onclick=\'deltr(" + (i - 1) + ")\' /></td>"
                                +"</tr>");
            }    
            
        }
    </script>
    </head>
    <body>
        
        <table id="tab" border="0" width="30%" align="center" style="margin-top:20px">
            <tr>
                <td width="10%">ID</td>
                <td>公司名称</td>
                <td>公司类别</td>
                <td>联系地址</td>
                <td>操作</td>
           </tr>
           <tr>
                <td>1</td>
                <td><input type="text" /></td>
                <td>
                    <select><option selected>请选择</option><option>制造类</option><option>生产类</option><option>销售类</option></select>
                </td>
                <td><input type="text" /></td>
                <td><input type="button" id="but" value="增加"/></td>
            </tr>
        </table>
    </body>
    </html>
      

  2.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JavaScript测试</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <!-- 如果用jQuery就把这行注释去掉 <script src="jquery.min.js"></script>--><script type="text/javascript">
    function addTr(el) {
    var tb = document.getElementById("tb");
    var newTr = tb.insertRow();
    addChild(newTr);
    setId(tb);
    }
    function addChild(newTr) {
    var cell1 = newTr.insertCell();
    var cell2 = newTr.insertCell();
    var cell3 = newTr.insertCell();
    var cell4 = newTr.insertCell();
    var cell5 = newTr.insertCell();
    var input1 = document.createElement("input");
    cell2.appendChild(input1);
    var select = document.createElement("select");
    select.add(new Option("请选择",""));
    select.add(new Option("制造类",""));
    select.add(new Option("生产类",""));
    select.add(new Option("销售类",""));
    cell3.appendChild(select);
    var input2 = document.createElement("input");
    cell4.appendChild(input2);
    var delBtn = document.createElement("button");
    delBtn.innerHTML = "删除";
    cell5.appendChild(delBtn);
    delBtn.onclick = function() {
    var tb = document.getElementById("tb");
    tb.tBodies[0].removeChild(newTr);
    setId(tb);
    }
    }
    function setId(tb) {
    var len = tb.rows.length;
    for (var i = 1; i < len; i = i + 1) {
    tb.rows[i].cells[0].innerHTML = i;
    }
    }
    </script>
    </head><body>
    <div>
      <b>要求:</b>ID字段自增,页面初始只有标题行和第一条空信息行,点增加后在行尾增加一条空信息行,操作按钮变成(删除)ID列加1,点(删除)
      按钮时当前行被删除,ID列自动更新,所有操作用JavaScript完成,可以利用jQuery.
      </div>
    <table id="tb" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <th >ID</th>
      <th>公司名称</th>
      <th>公司类别</th>
      <th>联系地址</th>
      <th>操作</th>
      </tr>
      <!-- 页面初始保留行 开始 -->
      <tr>
      <td>1</td>
      <td><input/></td>
      <td>
      <select>
      <option selected>请选择</option>
      <option>制造类</option>
      <option>生产类</option>
      <option>销售类</option>
      </select>
      </td>
      <td><input/></td>
      <td><button onclick="addTr(this)">增加</button></td>
      </tr>
      <!-- 页面初始保留行 结束 -->
        
      <!-- 添加行后的示例行 开始 -->
      <tr>
      <td>2</td>
      <td><input/></td>
      <td>
      <select>
      <option selected>请选择</option>
      <option>制造类</option>
      <option>生产类</option>
      <option>销售类</option>
      </select>
      </td>
      <td><input/></td>
      <td><button>删除</button></td>
      </tr>
      <!-- 添加行后的示例行 结束 -->
        
      </table>
    </body>
    </html>