jquery 添加移除对象实例 append

来源：互联网发布：nozzle水龙头淘宝编辑：程序博客网时间：2024/05/17 04:37

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>appendTo的用法</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

function add(value){

    var obj = $("#test")[0];
    //var obj = document.getElementById('test');
    var id = $("#test").val();
    if(id){

        if (jsSelectIsExitItem(obj, id)) {
                    for (var i = 0; i < obj.options.length; i++) {
                        if (obj.options[i].value == id) {
                            obj.options[i] = null;
                            break;
                        }
                    }
        }
        $("#rain").append("<tr id='city_"+id+"' ><td><input type='text' name='cit2y_"+id+"' id='ci2ty_"+id+"' value='hello ,cssrain.."+id+"' > <input type='button' name='remove_"+id+"' id='remove_"+id+"' value='remove' onclick='deletea("+id+")' > </td></tr>");
    }

}
function deletea(id){
    var obj = $("#test")[0];
    $('#city_'+id).remove();
    obj.options[obj.length] = new Option(id, id);


}
function jsSelectIsExitItem(objSelect, objItemValue) {
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].value == objItemValue) {
            isExit = true;
            break;
        }
    }
    return isExit;
}
</script>

</head>

<body>
<SELECT ID="test">
    <OPTION VALUE="1" SELECTED>1</OPTION>
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="3">3</OPTION>
    <OPTION VALUE="4">4</OPTION>
    <OPTION VALUE="5">5</OPTION>
</SELECT>
<input type="button" name="head1" id="head1" value="append" onclick="add(3)" ><br>
<table name="rain" id="rain"><tr><td>12121</td></tr></table>

</body>

</html>