bootstrap模态窗

最新推荐文章于 2023-06-29 09:39:39 发布

baibai_-

最新推荐文章于 2023-06-29 09:39:39 发布

阅读量1.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42952532/article/details/88655641

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

点击按钮，弹出一个窗，输入信息，然后提交。
需要引入bootstrap文件和jq文件

<body>

<h2>创建模态框（Modal）</h2>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
	添加一位参会人
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id="modal_1">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					添加一位参会人
				</h4>
			</div>
			<div class="modal-body">
				姓名<input type="text" class="form-control" id="name_1"/>
                性别<br/>
                <label class="checkbox-inline">
                    <input type="radio" value="男" name="sex_1" checked />男
                </label>
                <label class="checkbox-inline">
                    <input type="radio"  value="女" name="sex_1"/>女
                </label>
                <br/>
                个性签名<input type="text" class="form-control" id="job_1"/>
                手机号<input type="text" class="form-control" id="phone_1"/>
			</div>
			<div class="modal-footer">
				<button id="close_1" type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="add_man()">
					提交更改
				</button>
			</div>
		</div>
	</div>
</div>


<table class="table table-hover table-bordered" id="mytable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>个性签名</th>
        <th>手机号</th>
        <th>选中</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="listTable">

    </tbody>
</table>



<script type="text/javascript">
    function add_man() {
        var name = document.getElementById('name_1').value;
        var b_1 = name.replace(/(^\s*)|(\s*$)/g, '');
        if (b_1 == '' || b_1 == undefined || b_1 == null){
            alert('请输入姓名');
            return false;
        }
        var sex = $("input[name='sex_1']:checked").val();
        var job = document.getElementById('job_1').value;
        var phone = document.getElementById('phone_1').value;
        var b_3 = phone.replace(/(^\s*)|(\s*$)/g, '');
        if(!(/^1\d{10}$/.test(b_3))){
            alert('请准确输入11位手机号码！');
            return false;
        }

        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML = name;
        var td2 = document.createElement('td');
        td2.innerHTML = sex;
        var td3 = document.createElement('td');
        td3.innerHTML = job;
        var td4 = document.createElement('td');
        td4.innerHTML = phone;
        var td5 = document.createElement('td');
        var input1 = document.createElement('input');
        td5.appendChild(input1);
        input1.setAttribute('type','checkbox');
        input1.setAttribute('name','item');
        var td6 = document.createElement('td');
        var input2 = document.createElement('input');
        td6.appendChild(input2);
        input2.setAttribute('type','button');
        input2.setAttribute('value','删除');
        input2.setAttribute('onclick','del(this)');
        input2.className = 'btn btn-danger';


        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        var listTable = document.getElementById('listTable');
        listTable.appendChild(tr);
        document.getElementById('name_1').value = '';
        document.getElementById('job_1').value = '';
        document.getElementById('phone_1').value = '';
        $('#close_1').click();

    }
    function del(obj) {
        var oParentnode = obj.parentNode.parentNode;
        var olistTable = document.getElementById('listTable');
        olistTable.removeChild(oParentnode);
    }

</script>
</body>

baibai_-

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
bootstrap模态窗

点击按钮，弹出一个窗，输入信息，然后提交。需要引入bootstrap文件和jq文件<body><h2>创建模态框（Modal）</h2><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 添加一位参会人</button>...
复制链接

扫一扫