js 获取表格数据(表单变量值)

发布时间:2020-08-13 11:58:31 作者:qianqian_520
来源:网络 阅读:1884

js获取表单中的指定动态变量



问题描述:for循环实现表格每行数据输入,对应每行有提交表单需要做相应处理,我们需要获得该行某列的变量值


要求:表格每一行有一个提交按钮实现前台判断操作(判断表格每行第二列的值namefile是否等于动态设置的值)


实现:通过在提交表单onsubmit="javascript:return checkName()"调用函数checkName()检测,返回false表单不提交,不返回或者返回true提交表单


程序框架如下:

<head>

    <script type="text/javascript">

        function checkName(){



        }

    </script>

</head>


<body> 

......

<%for(var i = 0, i < 10, ++i)%>

    <tr>

        <td>

            ....

        </td>

        <td>

        <form action="file.action" enctype="multipart/form-data" method="post"

onsubmit="javascript:return checkName()">

<input type="hidden" name="subfilename" id="subfilename" value="<%=namefile%>"/>


        <input type="submit" name="btn" value="点击" />

        </form>

        </td>

        <td>

            ....

        </td>

          .

          .

          .

    </tr>

</body> 



js实现方法:

一、采用getElementById() ,该方法难以实现

原因:getElementById()返回拥有指定id的第一个对象的引用,因为我们实现的是for循环多行数据采用同一个变量,该函数只会得到第一行的对象


getElementById()在js中使用:

var name = getElementById("filename").value; //name为得到的对应id的属性值,filename为id名称


二、采用getElementsByName()该方法难以实现

原因:getElementsByName()返回指定名称对象的集合,为对象数组结构,对应每一行的提交按钮无法确定是第几行,也无法检测是第几个提交按钮

检测方法比较复杂


三、采用函数传值

有的时候不能采用固定思维,只想到利用HTML DOM 方法,利用函数传值很简单,每行的参数变量是变化的,每行传的形参自然是正确的


代码如下:

<head>

    <script type="text/javascript">

        function checkName(subfilename){

            if(subfilename == "  ") //引号里自己控制,若动态也可以用此函数传形参过来

            {

                return true;//可以省略

            }

            else{

                alert("请重新选择");

                return false;

            }

        }

    </script>

</head>


<body> 

......

<%for(var i = 0, i < 10, ++i)%>

    <tr>

        <td>

            ....

        </td>

        <td>

        <form action="file.action" enctype="multipart/form-data" method="post"

onsubmit="javascript:return checkName(subfilename.value)">

<input type="hidden" name="subfilename" id="subfilename" value="<%=namefile%>"/>

......

        <input type="submit" name="btn" value="点击" />

        </form>

        </td>

        <td>

            ....

        </td>

          .

          .

          .

    </tr>

</body> 


测试,此方法简单有效。












推荐阅读:
  1. js获取form表单数据和form表单赋值
  2. js实现简单的表格增删效果的方法介绍

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 获取表格数据 表单数据

上一篇:修改Vue打包后默认文件名的方法

下一篇:c++11新标准中移动语义与右值引用是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》