js 动态操作表格

最新推荐文章于 2024-05-13 01:52:35 发布
最新推荐文章于 2024-05-13 01:52:35 发布
阅读量742 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flanet/article/details/8640802
版权
<link href="${base }/res/cc/css/css.css" rel="stylesheet" type="text/css" />
<link href="${base }/res/app/css/public.css" rel="stylesheet" type="text/css" />
<body>
<div class="main-div">
 
  <div class="right-div">
  <@p.form action="query.aj" refreshId="list-page" class="ajaxfrm" method="post" stopRefresh=false id="queryForm">
      <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
          <tr>
              <td>商品名称:<input type="text"/>商品编号:<input type="text"/></td>
          </tr>
          <tr>
              <td>按商品类目:
                  <SELECT>
                    <OPTION selected value="全部一级类目">全部一级类目</OPTION>
                    <OPTION  value="一级类目1">一级类目1</OPTION>
                    <OPTION  value="一级类目2">一级类目2</OPTION>
                </SELECT>
                <SELECT>
                    <OPTION selected value="全部二级类目">全部二级类目</OPTION>
                    <OPTION  value="二级类目1">二级类目1</OPTION>
                    <OPTION  value="二级类目2">二级类目2</OPTION>
                </SELECT>
              </td>
          </tr>
          <tr>
              <td>
              按商品品牌:
              <SELECT id="u342" class="u342 u342_text_sketch"   >
                <OPTION selected value="全部品牌">全部品牌</OPTION>
                <OPTION  value="品牌1">品牌1</OPTION>
                <OPTION  value="品牌2">品牌2</OPTION>
            </SELECT>
            <span style="padding-left:6cm;"><input type="submit" value="查询"/></span>
            </td>
          </tr>
      </table>
  </@p.form>
    <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
      <tr>
        <td width="945" align="center"><table width="960" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="940"><table width="950" border="0" cellpadding="5" cellspacing="1" class="bg-g">
                  <tr>
                    <td bgcolor="#FFFFFF">商品编号</td>
                    <td bgcolor="#FFFFFF">商品名称</td>
                    <td bgcolor="#FFFFFF">商品品牌</td>
                    <td bgcolor="#FFFFFF">销售价</td>
                    <td bgcolor="#FFFFFF">操作</td>
                  </tr>

           <#list list as row>
                  <tr>
                    <td bgcolor="#FFFFFF">${row.commSpu}</td>
                    <td bgcolor="#FFFFFF">${row.commName}</td>
                    <td bgcolor="#FFFFFF">${row.brandName}</td>
                    <td bgcolor="#FFFFFF">${row.lowSellMoney}</td>
                    <td bgcolor="#FFFFFF"><input type="button" value="选择" οnclick="selectPro(this.parentNode.parentNode)"/></td>
                  </tr>
            </#list>
                
                </table></td>
            </tr>
          </table>
          <tr>
     <td colspan="2" align="center">
            <@p.pagination  value=page />
     </td>
      </tr>
      </tr>
    </table>
    <br/>
    <div id="u346_rtf"><p style="text-align:center;">
    <span style="font-family:微软雅黑;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">已选定商品</span></p></div>
    </div>
    <br/>
    <@p.form action="signup.aj" refreshId="list-page" class="ajaxfrm" method="post" stopRefresh=false id="signupForm">
    <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
      <tr>
        <td width="945" align="center">
        <table width="960" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="940"><table width="950" border="0" cellpadding="5" cellspacing="1" class="bg-g" id="selectTable">
                  <tr>
                    <td bgcolor="#CCCCCC">商品编号</td>
                    <td bgcolor="#CCCCCC">商品名称</td>
                    <td bgcolor="#CCCCCC">商品品牌</td>
                    <td bgcolor="#CCCCCC">销售价</td>
                     <td bgcolor="#CCCCCC">推荐</td>
                    <td bgcolor="#CCCCCC">操作</td>
                  </tr>
                
                </table>
            </td>
           </tr>
          </table>
          <tr>
      </tr>
      </tr>
      <tr>
          <td align="center"><input type="submit" value="&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;" οnclick="submitForm();"/>&nbsp;&nbsp;
          <input type="button" value="&nbsp;&nbsp;&nbsp;&nbsp;取&nbsp;&nbsp;消&nbsp;&nbsp;&nbsp;&nbsp;" οnclick="javascript:window.close()" /></td>
      </tr>
    </table>
    </@p.form>
  </div>
  <div class="footer">版权信息</div>
</div>
<script type="text/javascript">

/**
 * 选择商品
*/
function selectPro(selectRow){
    var table = document.getElementById("selectTable");
    var proId = selectRow.cells[0].innerText;
    //判断商品编号是否重复
    var rows = table.rows;
    for(var i = 0; i < rows.length;i ++){
        var r = rows[i];
        if(proId == r.cells[0].innerText){
            alert("该商品不能重复选择!");
            return;
        }
    }
    var row = table.insertRow(1);
    row.style.backgroundColor="#FFFFFF";
    for(var i = 3; i >= 0; i--){
        var cell = row.insertCell();
        cell.innerHTML = selectRow.cells[i].innerHTML;
    }
    row.insertCell(4).innerHTML = "<input type='checkbox' checked='true' name='proList' value='" + selectRow.cells[0].innerText + "'/>";
    row.insertCell(5).innerHTML = "<input type='button' value='取消' οnclick='deletePro(this.parentNode.parentNode.rowIndex)'/>";
    
}
/**
 * 删除一行
*/
function deletePro(rowIndex){
    var table = document.getElementById("selectTable");
    if(table.rows.length > 0){
        table.deleteRow(rowIndex);
    }
}
function submitForm(){
    
    window.opener.location.href=window.opener.location.href;
    window.close();
 
}
</script>
 
flanet
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现动态表格
qq_36760873的博客
10-06 2596
js实现动态表格 1.实现效果图 2.代码呈上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <script type="text/javascript"> ...
JavaScript实现动态表格
贤蛋大眼萌
03-06 312
效果下： 分析： 添加 1、添加：给添加按钮绑定事件 2、获取文本框的内容 3、创建ttd，设置td的文本为文本框的内容 4、创建tr 5、将td添加搭配tr中 6、获取table，将tr添加到tr中 删除 1、确定点击的是哪一个超链接 2、怎么删除？ 3、使用removeChild（） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ..
操作元素实例 -动态创建表格
热门推荐
qq_41853417的博客
09-24 1万+
动态创建表格： 涉及知识： node.createElement()创建元素节点<p> 父节点.appendChild(child)添加节点<p> node.removeChild(child)删除元素字节<p> 对象的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
2024年前端最全最详细的JS动态创建表格以及实现分页!，头条三面刷人吗
2401_84619467的博客
05-13 502
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】接下来搜索功能，在主函数中定义searchList()这个方法。
JS表格的动态操作完整示例
10-15
在JavaScript中，动态操作表格是一种常见的需求，尤其是在创建交互式网页时。本示例将详细介绍如何使用JS进行表格的动态修改和删除操作。首先，我们需要理解HTML中的表格结构，一个表格由`<table>`标签定义，其中...
js动态操作表格
12-05
在JavaScript编程中，动态操作表格是一项常见的需求，特别是在构建数据驱动的Web应用时。这个主题主要涵盖如何使用JavaScript来创建、修改以及删除HTML表格（`<table>`元素）中的行（`<tr>`）、列（`<td>`或`<th>`）...
JavaScript动态操作表格实例(添加,删除行,列及单元格)
01-21
js动态操作表格</title>[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i<6;i++){var row=document.createElement(“tr...
JS如何操作DOM基于表格动态展示数据
01-18
公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示 我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时IE内存一直累积，最后会造成崩溃现象 使用别人的插件说起来是效果好...
JavaScript实现动态生成表格
12-28
本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行：<input type=text id=row /> 列： <input type=text id=col /> <input type=button name=go id=go value=go onclick=add() /> </body> js代码部
js动态添加表格
08-01
javascript实现动态的添加表格功能
js动态绘制表格，实现动态绘制，添加 和删除
05-23
js动态的绘制表格很好的例子，包括如何动态的去添加 修改 和删除表格 以及遍历表格内容
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
JS动态表格
qq_45387575的博客
02-25 2050
1、因为里面的数据都是动态的，需要JS来动态生成 ，数据采取对象形式存储 2、所有的数据都是放在tbody行里面 3、创建的行数对应多少人，用数组的长度来获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m...
使用JavaScript实现动态表格
geng1025的博客
01-03 2914
通过以上步骤，我们可以使用JavaScript实现动态表格的功能。这不仅可以帮助我们快速构建交互式网页，还可以提高用户体验和数据展示效果。在实现过程中，需要注意数据验证、样式设置、排序、数据绑定和过滤搜索等方面的问题，以确保表格的可靠性和易用性。同时，也可以根据实际需求进行扩展和优化，以实现更加复杂的功能。
最详细的JS动态创建表格以及实现分页!
2401_84418883的博客
05-03 858
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】左边省略号展开} else { //点到最左边是[1,2,3,…,total]由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Html和CSS的关系
weixin_30593443的博客
03-03 536
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可...
JAVAScript动态生成表格
最新发布
05-27
JavaScript动态生成表格可以通过DOM操作来实现。以下是一些基本的步骤： 1. 首先创建一个table元素，并设置其属性（如id、border等）。 2. 创建thead元素和tbody元素，并添加到table中。 3. 创建tr元素作为thead中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值