JavaScript操作Table和动态生成Table

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript操作Table和动态生成Table相关的知识，希望对你有一定的参考价值。

JavaScript操作Table
（1）自动生成Table（添加行/删除行）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动态生成表格</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
         //<tr/>居中
        $("#tab tr").attr("align","center");

       //增加行
      $("#but").click(function(){
           var _len = $("#tab tr").length;        
         $("#tab").append("<tr id="+_len+" align=‘center‘>"
                             +"<td>"+_len+"</td>"
                             +"<td>用户"+_len+"</td>"
                            +"<td><input type=‘text‘ name=‘desc"+_len+"‘ id=‘desc"+_len+"‘ /></td>"
                            +"<td><a href=‘#‘ onclick=‘delRow("+_len+")‘>删除</a></td>"
                          +"</tr>");            
      })    
   })

    //删除行
   var delRow =function(index)
   {
      var _len = $("#tab tr").length;
      $("tr[id=‘"+index+"‘]").remove();//删除当前行
     for(var i=index+1,j=_len;i<j;i++)
      {
           var nextTxtVal = $("#desc"+i).val();
           $("tr[id=‘"+i+"‘]")
               .replaceWith("<tr id="+(i-1)+" align=‘center‘>"
                               +"<td>"+(i-1)+"</td>"
                               +"<td>用户"+(i-1)+"</td>"
                               +"<td><input type=‘text‘ name=‘desc"+(i-1)+"‘ value=‘"+nextTxtVal+"‘ id=‘desc"+(i-1)+"‘/></td>"
                             +"<td><a href=‘#‘ onclick=‘delRow("+(i-1)+")‘>删除</a></td>"
                          +"</tr>");
      }    

   }
</script>
</head>
<body>
    <table id="tab"></table>    
    <button id="but">添加table的行</button>
</body>
</html>

（2）获取Table中每行的值

<html>
<head>
<meta charset="utf-8" />
<title>获取Table中每行的值</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <table width="100%" border="1" id="tb">
        <tr>
            <td><INPUT TYPE="text" NAME="a1" value="Apple"></td>
            <td>
                <select id="sel">
                    <option value=‘man‘>男</option>
                    <option value=‘ma‘>女</option>
                </select>
            </td>
            <td>21</td>
        </tr>
        <tr>
            <td><INPUT TYPE="text" NAME="a2" value="王五"></td>
            <TD><select id="sel">
                    <option value=‘man‘>男</option>
                    <option value=‘ma‘>女</option>
                </select></TD>
            <TD>19</TD>
        </tr>
            <tr>
            <td><INPUT TYPE="text" NAME="a1" value="张三"></td>
            <td>
                <select id="sel">
                    <option value=‘man‘>男</option>
                    <option value=‘ma‘>女</option>
                </select>
            </td>
            <td>21</td>
        </tr>
    </table>

<button id="btn">获取Table中每行的值</button>
<script>
$(function(){
  var str=‘‘;
  $(‘#btn‘).on(‘click‘,function(){
    $(‘#tb tr‘).each(function(i){
         var columnOne = $(this).children(‘td‘).eq(0).children("input").val();
         var columnTwo = $(this).children(‘td‘).eq(1).children("#sel").val();
         var columnThree = $(this).children(‘td‘).eq(2).text();
        str+=columnOne+","+columnTwo+","+columnThree+"|";
    });

    alert(str);
    str=‘‘;
  })
})
</script>
</body>
</html>

（3）使用Js中的clone实现动态添加Table中的行和删除行

<html>
<head>
<meta charset="utf8" />
<title>动态生成Table</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div>
        <table class="table" id="tb3" border="0px solid grey">
            <thead>
                <tr style="border:0px solid grey">
                    <th style="font-size:13px;">科目</th>
                    <th style="font-size:13px;">科目分类</th>
                    <th style="font-size:13px;">科目编码</th>
                    <th style="font-size:13px;">科目分数</th>
                </tr>
            </thead>

            <tbody id="trlist">
                <tr style="border:0px" id="tr">
                    <td>
                        <select name="merchant3" id="merchant5"  style="height:28px;">
                            <option value="">请选择科目</option>

                        </select>
                    </td>
                    <td>
                        <select name="category3" id="category5"  style="height:28px;">
                            <option value="">请选择分类</option>
                        </select>
                    </td>
                    <td><input type="text" name="rightCode3" id="rightCode5" value="" style="width:150px;" required /></td>
                    <td><input type="text" name="rightName3" id="rightName5" value="" style="width:150px;" required /></td>
                    <td>
                        <button id="remove" >删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div><button id="addrow">动态生成Table</button></div>
</div>

<script type="text/javascript">
        $(function(){
            $("#addrow").click(addrow);//绑定添加事件
            $("#remove").click(removerow);//绑定删除事件。
        });

        function addrow(){//增加
            var _len = $("#trlist tr").length;
            if(_len<5) {
               var newObj=$("#tr").clone(true);
                newObj.children(‘td‘).eq(2).children("input").val(‘‘);
                newObj.children(‘td‘).eq(3).children("input").val(‘‘);
                $(".table>tbody:last").append(newObj);//复制tr，并且添加
            }else{
                alert("最多只能添加5个!");
            }
        }

        function removerow(){//移除
            var _len = $("#trlist tr").length;
            if(_len==1){
                return;
            }
            $(this).parent().parent().remove();
        }
    </script>
</body>
</html>

（4）获取Table每行的值并判断是否重复

<html>
<head>
<meta charset="utf8" />
<title>获取Table每行的值并判断是否重复</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div>
        <table class="table" id="tb3" border="0px solid grey">
            <thead>
                <tr style="border:0px solid grey">
                    <th style="font-size:13px;">科目</th>
                    <th style="font-size:13px;">科目分类</th>
                    <th style="font-size:13px;">科目编码</th>
                    <th style="font-size:13px;">科目分数</th>
                </tr>
            </thead>

            <tbody id="trlist">
                <tr style="border:0px" id="tr">
                    <td>
                        <select name="merchant3" id="merchant5"  style="height:28px;">
                            <option value="">请选择科目</option>

                        </select>
                    </td>
                    <td>
                        <select name="category3" id="category5"  style="height:28px;">
                            <option value="">请选择分类</option>
                        </select>
                    </td>
                    <td><input type="text" name="rightCode3" id="rightCode5" value="" style="width:150px;" required /></td>
                    <td><input type="text" name="rightName3" id="rightName5" value="" style="width:150px;" required /></td>
                    <td>
                        <button id="remove" >删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <button id="addrow">动态生成Table</button>
            <button onClick="getRow()">获取Table每行的值并判断是否重复</button>
        </div>
</div>

<script type="text/javascript">
        $(function(){
            $("#addrow").click(addrow);//绑定添加事件
            $("#remove").click(removerow);//绑定删除事件。
        });

        function addrow(){//增加
            var _len = $("#trlist tr").length;
            if(_len<5) {
               var newObj=$("#tr").clone(true);
                newObj.children(‘td‘).eq(2).children("input").val(‘‘);
                newObj.children(‘td‘).eq(3).children("input").val(‘‘);
                $(".table>tbody:last").append(newObj);//复制tr，并且添加
            }else{
                alert("最多只能添加5个!");
            }
        }

        function removerow(){//移除
            var _len = $("#trlist tr").length;
            if(_len==1){
                return;
            }
            $(this).parent().parent().remove();
        }

    var list = [];
    var str=‘‘;
    function getRow(){
        $(‘#trlist tr‘).each(function (i) {
            var merchant = $(this).children(‘td‘).eq(0).children("select").val();
            var category = $(this).children(‘td‘).eq(1).children("select").val();
            var rightCode = $(this).children(‘td‘).eq(2).children("input").val();
            var rightName = $(this).children(‘td‘).eq(3).children("input").val();
            list.push({"merchant": merchant,"category":category,"rightCode":rightCode,"rightName":rightName});

            str += merchant + "," + category + "," + rightCode + "," + rightName + ";"

            //判断是否重复
            judgeRepeatRow(list);

        });
        alert(str);
        str="";
    }

    function judgeRepeatRow(list){
        //前台页面去重
        var find = false;
        for (var i = 0; i < list.length; i++) {
            for (var j = i + 1; j < list.length; j++) {
                if (list[i].rightCode == list[j].rightCode && list[i].rightName == list[j].rightName) {
                    find = true;
                    break;
                }
            }
            if (find) {
                break;
            }
        }
        if(find){
            alert("重复 !");
            return;
        }
    }
    </script>
</body>
</html>

（5）获取Table每列的值
技术分享图片

附加：

（1）获取文本框的值到一个文本框中（change事件和focus事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>获取文本框的值</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });

 var str=‘‘;
  $("input[id=text]").each(function() {
    $(this).bind("change", function() {
        str+=$(this).val()+",";
        $("#text2").val(str);
    });
   });
});
</script>
</head>
<body>
第一个值: <input type="text" id=‘text‘/><br/>
第二个值: <input type="text"  id=‘text‘/><br/>
获取上面文本框的值: <input type="text" id=‘text2‘ /><br/>
</body>
</html>

以上是关于JavaScript操作Table和动态生成Table的主要内容，如果未能解决你的问题，请参考以下文章

使用JavaScript动态生成表格

JavaScript 动态表格操作

JavaScript动态创建table表格

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

使用JavaScript或jquery实现动态交互效果： 点击登录和注册时，可以完成登录和注册tab的切换

JavaScript-节点操作之 动态生成表格案例