zoukankan      html  css  js  c++  java
  • select 标签级联 和 html增加/删除行

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>
    联动和增加行
    </title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    function jl1(value){
    document.getElementById("ml2").options.length = 0;
    var selectObj = document.getElementById("ml2");
    selectObj.options[selectObj.length] = new Option("全部","");

    if(value=='1'){
    selectObj.options[selectObj.length] = new Option('v1','v1');
    selectObj.options[selectObj.length] = new Option('v2','v2');
    }
    if(value=='2'){
    selectObj.options[selectObj.length] = new Option('vv1','vv1');
    selectObj.options[selectObj.length] = new Option('vv2','vv2');
    }
    fz();

    }
    function fz(){
    var ml1 = $("#ml1").val();
    var ml2 = $("#ml2").val();
    var ml = (ml2==''||ml2==null)?ml=ml1:ml=ml2;
    $("#ml").val(ml);
    //alert($("#ml").val());
    }
    /**
    success:function(res){

    var result = res.split(";");
    var tep;

    document.getElementById("ml2").options.length = 0;
    var selectObj = document.getElementById("ml2");
    selectObj.options[selectObj.length] = new Option("全部","");

    if(result!=""&&result!=null){
    for (i = 0; i < result.length; i++) {
    tep = result[i]
    var tmparr = tep.split(",");
    selectObj.options[selectObj.length] = new Option(tmparr[1],tmparr[0]);
    }
    }
    changeValue();
    }
    */

    function addTr(){
    $("#tbody").append(createNewRow());
    sortNumber();
    }

    function createNewRow(){
    var index = $(".tr");
    var td = $("#tr1").html();
    var tr = "<tr id='tr"+index.length+"' class='tr'>"+td+"</tr>";
    return tr;
    }
    function sortNumber(){
    $(".xh").each(function(index,obj){
    $(obj).html(index+1);
    $(obj).parents('tr').attr("id","tr"+(index+1));
    });
    }
    function delTr(obj){
    var tr = $(".tr").length;
    if(tr==1){
    alert("必须保留一行");
    return;
    }
    $(obj).parents('tr').remove();
    sortNumber();
    }
    </script>
    </head>
    <body>
    <input id='ml' name='ml' type='hidden'/>
    <select onchange="jl1(this.value)" id='ml1'>
    <option value ="">全部</option>
    <option value ="1">1</option>
    <option value ="2">2</option>
    <option value ="3">3</option>
    </select>
    <select id='ml2' onchange='fz()'>
    <option value ="">全部</option>
    </select>
    <br><br>
    <br><br>
    <br><br>
    <input type='button' value='增加行' onclick='addTr()'>
    <table >
    <tbody id='tbody'>
    <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
    </tr>
    <tr id='tr1' name='tr' class='tr'>
    <td class='xh'>1</td>
    <td>
    <input name='name'></input>
    </td>
    <td>
    <input name='age'></input>
    </td>
    <td>
    <input type='button' value='删除' onclick="delTr(this)"></input>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • 相关阅读:
    2879. [NOI2012]美食节【费用流】
    luogu P1012 拼数
    luogu cover
    luogu cogs . [NOIP2003] 传染病控制 WA(1/2)
    luogu P1340 兽径管理 WA
    luogu P1342 请柬
    HTML学习笔记二
    HTML学习笔记一
    arr.sort()
    编写函数实现随机产生指定范围的整数的功能
  • 原文地址:https://www.cnblogs.com/BigWrite/p/9166346.html
Copyright © 2011-2022 走看看