html表格表单-居中-循环,让form的action属性只提交数据不跳转页面

让form的action属性只提交数据不跳转页面

		<form action="http://localhost:8080" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="myForm" target="nm_iframe">
			<input type="file" name="file" id="file" />
			<input type="submit" id="mySub" />
		</form>
		
		<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>

jsp中新窗口form提交时不打开新窗口并关闭当前窗口

----------------------------------不打开新窗口的方法---------------------------------------

其实很简单,加上以下代码:

<script type="text/javascript">
       window.name = "curWindow";
</script>
 
对应的form添加target:
<form name="myForm" id="myForm" action="" method="post"  target="curWindow">



----------------------------------提交form关闭当前窗口--------------------------------------

示例:

<form action='#' id="myForm">
    <input type="text" name="username" value=""/>
    <input type="button" value="提交" οnclick="subform();"/>
</form>
方法:

function subform(){
    var form = document.getElementById('myForm');//获取表单dom
    form.action="testurl";//重新设置提交url
    form.submit();//提交表单
    window.close();//关闭窗口
 }


————————————————
原文链接:https://blog.csdn.net/justdoit_potato/article/details/50426347

css定位&锚点

命名锚点链接(锚点):控制在同一个页面中进行跳转
    1.跳转到的地方:<div id="box"></div>
    2.点击按钮:<a href="#box">点击回到顶部</a>
    3.注意
        - 锚点只能用a标签控制
        - 跳转的地方只能用id
    4.作用:回到顶部、楼层效果、轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../03-reset.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            scroll-behavior: smooth
        }
        .btnBox{
            width: 50px;
            height: 250px;
            background: #000;
            position: fixed;
            right: 0;
            top: 35%;
        }
        /* 特殊情况 不会继承字体颜色 */
        .btnBox a{
            color: #fff;
            display: block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        /* 宽高自适应:浏览器默认宽度是100%  高度是0 */
        #box1,#box2,#box3,#box4,#box5{
            width: 100%;
            height: 100%;
        }
        #box1{
            background: gray
        }
        #box2{
            background: skyblue
        }
        #box3{
            background: greenyellow
        }
        #box4{
            background: yellowgreen
        }
        #box5{
            background: peru
        }
    </style>
</head>
<body>
    <div class="btnBox">
        <a href="#box1">1F</a>
        <a href="#box2">2F</a>
        <a href="#box3">3F</a>
        <a href="#box4">4F</a>
        <a href="#box5">5F</a>
    </div>
————————————————
版权声明:本文为CSDN博主「ZJH_are」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ZJH_are/article/details/125773630

绝对定位属性的使用

1.属性:position
    2.属性值:absolute
    3.绝对定位属性的特点
        - 绝对定位的参照物(父相子绝)
            - 当父级元素有定位属性的时候就会相对于父级元素进行移动
            - 当父级元素没有定位属性的时候,就会往上级查找,直至找到浏览器
        - 绝对定位会脱离文档流,破坏了正常的网页布局

    拓展布局中"流"的概念
    1.普通流:文档流、文档层 表示网页的正常布局
    2.浮动流:浮动层 浮动在网页的上方
    3.定位流:定位层 在浮动层的上面
    4.定位>浮动>文档

html表格表单-居中-循环

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>客户表</title>
<style>
body{}
div{margin:auto 5%;} 
.parent {
  display:flex;
  justify-content:center;
  align-items:center;
  #div居中
}

table{margin:auto; width: 80%;  max-width:1200px; #表格居中} 
td{}

h1,h2,h3,h4,h5{text-align:center;}
</style> 
</head>
<body>
<div class="parent">
<div>
<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr >
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>


<h1>客户跟进表</h1>
<table border="1">
<tr style="text-align: center; font-weight: bold;">
  <td style="width:26px;">序号</td>
  <td style="width:26px;">姓名</td>
  <td>电话</td>
  <td>客户信息</td>
  <td>跟进情况</td>
  <td>备注</td>
</tr>

<?php 
for ($i=1; $i<=5; $i++)
{
//echo "数字为 " . $i . PHP_EOL;
echo
'
<tr>
  <td style="text-align: center; font-weight:bold;">'.$i.'</td>
  <td style="text-align:center;">x先生</td>
  <td>133xxxxx968</td>
  <td style="text-indent: 5px; ">X先生  133xxxxx968  后海</td>
  <td style="text-indent: 5px;">X天上门量房</td>
  <td style="text-indent: 5px;">有效</td>

</tr>

<tr>
  <td colspan="2" style="text-align: center;">更新</td>
  <td colspan="3"><textarea cols="40"  placeholder="请输入 序号'.$i.'  X先生跟进的情况结果..." style="text-indent: 20px; max-width:100%;"></textarea></td>
  <td><input type="submit" value="提交"></td>
</tr>

';
}
?>
</table>
</div>
</div>
</body>
</html>

您可能还喜欢...

发表回复