用Javascript动态添加和删除表格行(1)说明和举例

最新推荐文章于 2021-03-26 10:22:21 发布

wanxw2001

最新推荐文章于 2021-03-26 10:22:21 发布

阅读量3.8k

点赞数

分类专栏： javascript 文章标签： javascript input button html class border

本文链接：https://blog.csdn.net/wanxw2001/article/details/2497264

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1．基本思路

（1）如何“复制”？
如上图所示，如果要在表格的某行上面或下面添加新的一行，
并且保证单元格中所有标签都一样，一般都是用clone的方法。
但是发现clone方法对IE要求较高，须是6.0，
所以我放弃这个方法，通过取得各个单元格内的html，
赋予新增行相应的单元格，以达到“复制”效果。

取html会遇到一个问题，就是标签中如果value值存在的话，那么一并会取出来。
而显然，我们希望新增行没有初值，
所以，在增加行的时候，我将新行的所有文本框赋予空值，
单选框和复选框都变成非选中状态，而下拉框则选中第一个。

（2）radio的名称（name）问题
不管是使用clone还是“复制”html的方法，radio的命名都是一个问题，
因为我们希望每个单元格中的radio各成一组，
而clone和“复制”html都会将radio的name一并复制过来，
这样原有的radio和新增的radio拥有相同的name，
对其进行输入时会相互制约。
如果仅仅是找到新增的radio，并且赋予它name值是行不通的，
必须明确赋予单元格内html内容，该html必须包含radio的name值，
如此看来，“复制”html的方法虽然有点笨，到这里还是派上了用场^_^。
我们可以得到原始的html内容，如何改变它的name呢？
找出原始radio的name值，在新增行的html中替换成另外一个名称。
由于这个名称只是为了给radio分组，所以可以用随机数代替，
我用的是时间。

（3）如何给表格中的标签赋予name
显然，我们肯定要得到各个标签的值，也就必须知道标签的name。
当提交表单时，需要用户给定一个初始的name值，
然后根据这个初值，以递增的方式给各行的标签赋值，
比如，如果用户设定输入文本框name初值为txt，
那么所有输入文本框的name将变为：txt_0,txt_1,txt_2…….。
此时大可以放心radio的顽固，
虽然通过改变name的属性值无法让它的输入有效，
但是对于后台的取值丝毫没有影响，如人所愿。
另外，要取得所有标签的值，就必须它的个数，
这个程序当然会提供一个函数获取的。

2．程序的局限性
表格的格式必须与图中相似，
程序希望不要动态操作的行（如图中的第一，二行）内不含指定的标签，
所谓指定的标签就是input,textarea,select,
也是支持动态操作的标签。
如果想要支持更多标签，稍微修改程序即可。
不过，一般这些就足够。
另外，不希望这种固定的行在表格末尾出现。
而且，表格最后一列必须是添加、删除按钮。
尽管有这么多局限性，但是对付一般的应用是没问题的。

3．使用举例

（1）一个页面只操作一个表格的情况（推荐）
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
    <title>添加、删除表格</title>
    <script language="javascript" src="doTable.js"></script>
    <style>
        .btn
        {font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
        td{font-size:10pt;}
    </style>
</head>
<body>
<%
String        strCount = "";
String        strInputText = "",
            strArea     = "",
            strRdo     = "",
            strSelect     = "";
String[]    aStrChkBox=null;
int            intCount = 0;
strCount = request.getParameter("Count") == null?"":request.getParameter("Count");
if(!strCount.equals(""))
{
    intCount = Integer.parseInt(strCount);
    for(int i = 0 ;i < intCount;i ++ )
    {
        strInputText = request.getParameter("txtInput_" + i);
        strArea = request.getParameter("txtArea_" + i);
        strRdo = request.getParameter("rdoBox_" + i);
        strSelect = request.getParameter("select_" + i);
        out.println("输入文本框：" + strInputText + "");
        out.println("多行文本框：" + strArea + "");
        out.println("单选框：" + strRdo + "");
        out.println("下拉框：" + strSelect + "");
        aStrChkBox = request.getParameterValues("chkBox_" + i);
        if(aStrChkBox != null)
        {
            out.println("复选框：");
            for(int j = 0;j < aStrChkBox.length;j ++)
            {
                out.println(aStrChkBox[j] + ",");
            }
        }
        out.println("<hr>");
    }

}
%>
<center>
<form name="Form1" method="post">
    <table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
            bordercolorlight="#006699" bordercolordark="#DDDDDD" >
        <tb><font color="#00669">一个表格</font></tb>

        <tr >
            <td idth="150" colspan="6"  style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>

        </tr>
        <tr>
            <td width="100" align="center">输入文本框</td>
            <td width="100" align="center">多行文本框</td>
            <td width="100" align="center">单选框</td>
            <td width="100" align="center">复选框</td>
            <td width="100" align="center">下拉框</td>
            <td width="100" align="center">操作表格</td>
        </tr>

        <tr>
            <td align="center"><input type="text" size="10"></td>
            <td><textarea rows="3" cols="10" ></textarea></td>
            <td>
                <input type="radio" name="rdoBox_0" value="1">是
                <input type="radio" name="rdoBox_0" value="0">否
            </td>
            <td>
                <input type="checkbox" value="chk1">
                <input type="checkbox" value="chk2">
            </td>
            <td>
                <select>
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                </select>
            </td>
            <td align="cebter">
                <input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
                        onClick="javascript:addRow();">
                <input type="button" class="btn" name="btnDelRow" value="删除行"
                        onClick="javascript:delRow();">
            </td>
        </tr>
    </table>


</form>
<input type="button" class="btn" name="btnSubmit" value=" 提交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">

// ------- 初始化表格，页面加载时调用 ------- //
initTable("objTable1");

function submit()
{
    // -----------------------  设置标签name属性----------- /
    var aStrName = new Array("txtInput","txtArea","rdoBox","chkBox","select");
    setBaseName(aStrName);
    var intCount = getCount();        //获取动态行的总数
    Form1.action = "table.jsp?Count=" + intCount;
    Form1.submit();
}

</script>

（2）一个页面操作多个表格的情况（效率受较大影响），只给出html部分
<html>
<head>
    <title>添加、删除表格</title>
    <script language="javascript" src="doTable.js"></script>
    <style>
        .btn
        {font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
        td{font-size:10pt;}
    </style>
</head>
<body>
<center>
<form name="Form1" method="post">
    <table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
            bordercolorlight="#006699" bordercolordark="#DDDDDD" >
        <tb><font color="#00669">一个表格</font></tb>

        <tr >
            <td width="150" colspan="6"  style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>

        </tr>
        <tr>
            <td width="100" align="center">输入文本框</td>
            <td width="100" align="center">多行文本框</td>
            <td width="100" align="center">单选框</td>
            <td width="100" align="center">复选框</td>
            <td width="100" align="center">下拉框</td>
            <td width="100" align="center">操作表格</td>
        </tr>

        <tr>
            <td align="center"><input type="text" size="10"></td>
            <td><textarea rows="3" cols="10" ></textarea></td>
            <td>
                <input type="radio" name="rdoBox_0" value="1">是
                <input type="radio" name="rdoBox_0" value="0">否
            </td>
            <td>
                <input type="checkbox" value="chk1">
                <input type="checkbox" value="chk2">
            </td>
            <td>
                <select>
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                </select>
            </td>
            <td align="cebter">
                <input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
                        onClick="javascript:addRow('objTable1');">
                <input type="button" class="btn" name="btnDelRow" value="删除行"
                        onClick="javascript:delRow('objTable1');">
            </td>
        </tr>
    </table>

    <table width="600" border="1" id="objTable2" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
            bordercolorlight="#006699" bordercolordark="#DDDDDD" >
        <tb><font color="#00669">一个表格</font></tb>

        <tr >
            <td width="150" colspan="6"  style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>

        </tr>
        <tr>
            <td width="100" align="center">输入文本框</td>
            <td width="100" align="center">多行文本框</td>
            <td width="100" align="center">单选框</td>
            <td width="100" align="center">复选框</td>
            <td width="100" align="center">下拉框</td>
            <td width="100" align="center">操作表格</td>
        </tr>

        <tr>
            <td align="center"><input type="text" size="10"></td>
            <td><textarea rows="3" cols="10" ></textarea></td>
            <td>
                <input type="radio" name="rdoBox_0" value="1">是
                <input type="radio" name="rdoBox_0" value="0">否
            </td>
            <td>
                <input type="checkbox" value="chk1">
                <input type="checkbox" value="chk2">
            </td>
            <td>
                <select>
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                </select>
            </td>
            <td align="cebter">
                <input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
                        onClick="javascript:addRow('objTable2');">
                <input type="button" class="btn" name="btnDelRow" value="删除行"
                        onClick="javascript:delRow('objTable2');">
            </td>
        </tr>
    </table>


</form>
<input type="button" class="btn" name="btnSubmit" value=" 提交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">

function submit()
{
    setTable("objTable1");
    var aStrName1 = new Array("txtInput1","txtArea1","rdoBox1","chkBox1","select1");
    setBaseName(aStrName1);
    var intCount1 = getCount();
    setTable("objTable2");
    var aStrName2 = new Array("txtInput2","txtArea2","rdoBox2","chkBox2","select2");
    setBaseName(aStrName2);
    var intCount2 = getCount();
}

</script>

wanxw2001

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
用Javascript动态添加和删除表格行(1)说明和举例

1．基本思路（1）如何“复制”？如上图所示，如果要在表格的某行上面或下面添加新的一行，并且保证单元格中所有标签都一样，一般都是用clone的方法。但是发现clone方法对IE要求较高，须是6.0，所以我放弃这个方法，通过取得各个单元格内的html，赋予新增行相应的单元格，以达到“复制”效果。取html会遇到一个问题，就是标签中如果value值存在的话，那么一并会取出来。而显然，我们希望新增行没有初
复制链接

扫一扫