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>
来源: http://www.bubuko.com/infodetail-2924718.html