表格中用js左右添加从下拉列表中选择的内容

最新推荐文章于 2022-10-30 14:37:00 发布
最新推荐文章于 2022-10-30 14:37:00 发布
阅读量3.4k 收藏
点赞数
文章标签： button border user function table javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiguoxing/article/details/1033636
版权

<html>
 <HTML>
 <HEAD>
  <TITLE>
   Ultra NMS Portal
  </TITLE>
  </HEAD>
  <script language="javascript"> 

  function test(sel_source,groupE){
   var province=sel_source.options[sel_source.selectedIndex].text;
 var group=groupE.options[groupE.selectedIndex].text;

    var myTable = document.getElementById("testtable");
 var aa=myTable.rows.length;

 for(var i=1;i<aa;i++){
  var row=myTable.rows[i];
  
  var cell1=row.cells[0];//province
  var cell2=row.cells[1];//group
  var cell3=row.cells[2];//usr
  
  if(cell1.innerText!=province)
   continue;
  else
  {
   var rowspan=cell1.rowSpan;
   for(var j=0;j<rowspan;j++)
   {
    row=myTable.rows[i+j]
    if(rowspan==1 || row.cells.length==4)
     cell2=row.cells[1];//group
    else
     cell2=row.cells[0];//group
    if(cell2.innerText==group)
     return;
   }

   var addrow=myTable.insertRow(i+rowspan);
   addrow.id="2"+","+province+","+group;
   cell1.rowSpan=rowspan+1;
   addrow.insertCell(0).innerText=group;
   addrow.insertCell(1).innerText=" ";
   addrow.insertCell(2).innerHTML="<button id='"+"2"+","+province+","+group+"'οnclick='delTestRow(id)'>删除</button>";   
         
   return;
  }
 }

 var row1=myTable.insertRow(1);
 row1.id="2"+","+province+","+group;
 row1.insertCell(0).innerText=province;
 row1.insertCell(1).innerText=group;
 row1.insertCell(2).innerText=" ";
 row1.insertCell(3).innerHTML="<button  id='"+"2"+","+province+","+group+"'οnclick='delTestRow(id)'>删除</button>"; 

 
  }
 
  function delTestRow(delid){
    var myTable = document.getElementById("testtable");
 var aa=myTable.rows.length;
 var spanrow;
 var rowspan;

 for(var i=0;i<aa;i++){
  var row=myTable.rows[i];
  
  
  var collen=row.cells.length;
  
  if(collen==4){
  
   spanrow=i;
   rowspan=row.cells[0].rowSpan;
  }
  
   
   if(row.id==delid){
   if(collen==4)
   {
    if(rowspan==1)
     myTable.deleteRow(i);
    else
    {
     var nextrow=myTable.rows[i+1];
     nextrow.insertCell(0).innerText=row.cells[0].innerText;
     nextrow.cells[0].rowSpan=row.cells[0].rowSpan-1;
     myTable.deleteRow(i);
    }    
   }
   else
   {
    myTable.deleteRow(i);
    myTable.rows[spanrow].cells[0].rowSpan=rowspan-1;
   }
   return;
  }
  } 
  }
 
 
   function testtest(sel_source,userElement)
   {
  var province=sel_source.options[sel_source.selectedIndex].text;
  var user=userElement.options[userElement.selectedIndex].text;

     var myTable = document.getElementById("testtable");
  var aa=myTable.rows.length; 
 
  for(var i=1;i<aa;i++)
  {
   var row=myTable.rows[i];
   
   var provinceCell=row.cells[0];//province
   var userCell;//
   
   if(provinceCell.innerText!=province)
    continue;
   else
   {
    var rowspan=provinceCell.rowSpan;

    for(var j=0;j<rowspan;j++)
    {

     row=myTable.rows[i+j]
     if(rowspan==1 || row.cells.length==4)
      userCell=row.cells[2];//user
     else
      userCell=row.cells[1];//user
     if(userCell.innerText==user)
      return;
    }
 
    var addrow=myTable.insertRow(i+rowspan);
    addrow.id="1"+","+province+","+user;
    provinceCell.rowSpan=rowspan+1;
    addrow.insertCell(0).innerText=" ";
    addrow.insertCell(1).innerText=user;
    addrow.insertCell(2).innerHTML="<button id='"+"1"+","+province+","+user+"'οnclick='delTestRow(id)'>删除</button>"; 
      return;
   }
  } 
  
  var row1=myTable.insertRow(1);
  row1.id="1"+","+province+","+user;
  row1.insertCell(0).innerText=province;
  row1.insertCell(1).innerText=" ";
  row1.insertCell(2).innerText=user;
  row1.insertCell(3).innerHTML="<button  id='"+"1"+","+province+","+user+"'οnclick='delTestRow(id)'>删除</button>";
  }
 
 
 
  function submittable()
  {
   var combinestr="";
    var myTable = document.getElementById("testtable");
 var aa=myTable.rows.length;   
 
 for(var i=1;i<aa;i++)
 { 
  combinestr+=myTable.rows[i].id+";";
 }
 
 document.getElementById("combineStr").value=combinestr;
 
  }

 
  
 
</script>
 <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 οnlοad="document.powersearch.downcontent.focus()">
  <form method="post" name="powersearch" onSubmit="javascript:return(checkForm())" action="/uportal/ed/getvalidata.jsp" id="form1">
   <table width="768" height="346" border="1" align="center">
    
    
    
    
   <tr>
        <td height="130" colspan="4" align="justify">
   
              <table width="875" height="126" border="1" >
    <tr>
         
           <td width="97">
            <font style="font-size:12px;color:#000080;font-weight:bold;">
        省份名称 
        </font>     
        </td>
       <td height="30" colspan="2">
        <SELECT name="hero" id="hero" onChange="Change_Select()">
         <option>
          请选择
         </option>

         
         <option value="总部">

          总部

         </option>
         
         <option value="湖南分公司">

          湖南分公司

         </option>
         
         <option value="河北分公司">

          河北分公司

         </option>
         
         <option value="北京分公司">

          北京分公司

         </option>
         
         <option value="山东分公司">

          山东分公司

         </option>
         
         <option value="河南分公司">

          河南分公司

         </option>
         
        </SELECT>

       
                
      </tr>
      <tr>
       <td height="88" bgcolor="#FFFFFF">
        <font style="font-size:12px;color:#000080;font-weight:bold;">
        小组名称  
        </font>
       </td>
       <td width="140" bgcolor="#FFFFFF">
       
        <SELECT name="skill" id="skill" size=6 multiple=true >
        <OPTION value="0">
         Unbounded
        </OPTION>
       </SELECT>

       </td>
       <td width="46" bgcolor="#FFFFFF">
        <table width="46" border="0">
         <tr>
          <td width="40" height="36">
           <button οnclick="test(hero,skill)">
            添加
           </button>
          </td>
         </tr>
         <tr>
          <td>
           &nbsp;
          </td>
         </tr>

        </table>
       </td>
       <td width="364" bgcolor="#FFFFFF">
        <table width="364" height="31" border="1" id="testtable">
         <tr>
          <td width="67" height="25">
           <font style="font-size:12px;color:#000080;font-weight:bold;">
            省分名称
           </font>
          </td>
          <td width="82">
           <font style="font-size:12px;color:#000080;font-weight:bold;">
            小组名称
           </font>
          </td>
          <td width="88">
           <font style="font-size:12px;color:#000080;font-weight:bold;">
            人员门名称
           </font>
          </td>
          <td width="84" colspan="3">
           <font style="font-size:12px;color:#000080;font-weight:bold;">
            删除操作
           </font>
          </td>
         </tr>
        </table>
       </td>
       <td width="50" bgcolor="#FFFFFF">
        <table width="46" border="0">
         <tr>
          <td width="40" height="36">
           <button οnclick="testtest(hero,skill2)">
            添加
           </button>
          </td>
         </tr>
         <tr>
          <td>
           &nbsp;
          </td>
         </tr>

        </table>
       </td>
       <td width="87" bgcolor="#FFFFFF">
        <SELECT name="skill2" id="skill2" size=6 multiple=true >
        <OPTION value="0">
         Unbounded
        </OPTION>
       </SELECT>

       </td>
      </tr>
    
              </table>
               </td>
                </tr>
     
                
    
   </table>

  </form>

 </BODY>
</HTML>

caiguoxing
关注
JavaScript从入门到精通（全）
码农研究僧的博客
07-22 2万+
目录前言1. 入门案例2. 语法2.1 变量2.2 函数 前言 运行在浏览器的脚本语言（目标程序以文本格式打开） 用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断 Java运行在JVM当中，JavaScript运行在浏览器的内存当中 完整的javascript由语言基础,BOM,DOM组成 1. 入门案例 script标签javascript代码必须放在script标签中 用户点击以下按钮，弹出消息框 html中嵌入javascript有三种方式 第一种方式： 事件句柄=“js代码
Js实现表格头部第一行下拉固定
09-04
Js实现表格头部第一行下拉固定
JavaScript实例--网页跳转下拉框-JS修改表格内容-JS下拉框加元素
我是老伯的博客
07-17 930
一、JavaScript实例 1、需求：做一个下拉框，分别是河大，百度，京东。点哪个就直接跳转 <body> <select name="" id="ws"> <option value="http://baidu.com">百度</option> <option value="http://hbu.cn">河大</option> <option value="http://jd.com">京东</opti
生成下拉列表excel模板.rar
08-01
java 通过poi,查询数据库,将数据 生成下拉列表的excel
datatable.js在表格中添加下拉列表
a349646187的博客
07-18 2651
引入datatable.css,datatable.js body里写下完整的table格式 <table id="table1" class="table table-hover mb-none table-striped table-bordered" style="border-collapse: collapse;"> <thead> <...
jQuery插件 下拉列表日期选择控件
hffyyff的博客
11-07 3131
jQuery插件 下拉列表日期选择控件
Extjs4下拉菜单ComboBox中用Grid显示通用控件
05-30
- 在 `GridComboBox` 中，`GridPanel` 作为下拉菜单的内容，使用户能以表格形式查看和选择数据。 3. **使用 Grid 作为下拉菜单** - 当 `ComboBox` 的下拉列表需要展示复杂数据结构时，如多列或带有自定义样式的...
vue实现flex table表格模板效果
敲代码无敌小奶龙的博客
10-30 651
vue使用flex table实现几行几列模板效果
vue下拉框筛选表格数据
m0_60540878的博客
10-24 7663
html中： //下拉框 <el-form-item label="选择区域"> <el-select v-model="chick" clearable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label"
下拉框的内容通过js插入到table中
07-10
下拉框的内容通过js的insertRow插入到table中,通过delRow删除table中的行
boostraptable表格中添加下拉框，添加按钮
累兰羽的博客
03-05 1万+
来不及解释了， 快上车！ 前端使用的django的template模板语法 1. html显示bootsraptable配置 # 引入主要的js文件 &lt;link rel="stylesheet" href="{% static "lib/bootstrap-select/css/bootstrap-select.min.css" %}"/&gt; &lt;s...
layui 组件tableSelect 下拉表格选择器的应用
无名有道
10-13 3万+
     在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能，正好可以满足需求。     效果如下图所示： 插件下载地址  https://gitee.com/lolicode/layui_component_tableselect 使用...
使用js获取下拉列表框<option>中的value和text的值
05-13 1074
在编程过程中，我们对下拉列表框的取值很多时候都是获取option中的value，但是也有需要获取显示在页面中的值的时候，例如想获得ShowText中"ShowText"，我们该如何获取呢？方法很简单，具体代码如下： function a(object){ alert(object); } text-a text-b text-c text-d
JS根据表单中的选项，自动生成span标签后显示选中的内容
简简单单
12-10 6503
在下订单时，根据选择的订单内容，动态显示出来，供用户确认。 源代码如下： 景点编号 门票名称 成人票 学生票 儿童票 军人票 价格张数价格张数价格张数价
javascript 动态添加表格行
龙的天空
03-09 932
原文出处：[url]http://www.wangchao.net.cn/bbsdetail_305567.html[/url]动态添加表格行 文/Ray 表格部分代码如下：第一行第二行第三行动态添加表行的javascript函数如下：function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var newTd0 = n
vuejs绑定数据到select中，选择option数据后，同步改变下面一个输入框input的值
热门推荐
qq_21036015的博客
04-28 4万+
前言：应公司开发，某小功能的需要，所以初次接触到vuejs，摸索学习中，还不熟练，只是简单分享一些公司开发中遇到的一些问题，有不足的地方欢迎留言讨论。   一，问题描述： 【当前页面里有一个select框 + 一个input框】 1.ajax请求后台数据，绑定到select下拉单选框中。 2.点击下拉框，选中一栏数据，同时input从没有值变成同步更新到选中的那一栏值。 3.演示效果图
l重新给我Qt中用MySQL表格中添加一列封装好的代码
最新发布
06-10
以下是一个简单的 Qt 中使用 MySQL 表格中添加一列的封装好的示例代码： ```c++ #include <QtSql> bool addColumnToTable(QString tableName, QString columnName, QString columnType) { // 连接数据库 QSqlDatabase db = QSqlDatabase::addDatabase("QMYSQL"); db.setHostName("localhost"); // 设置主机名 db.setDatabaseName("mydatabase"); // 设置数据库名 db.setUserName("myusername"); // 设置用户名 db.setPassword("mypassword"); // 设置密码 if (!db.open()) { qDebug() << "无法连接数据库"; return false; } // 添加表格中的一列 QSqlQuery query; QString sql = QString("ALTER TABLE %1 ADD COLUMN %2 %3").arg(tableName).arg(columnName).arg(columnType); if (!query.exec(sql)) { qDebug() << "添加表格中的一列失败"; return false; } // 关闭数据库连接 db.close(); return true; } ``` 在上述代码中，我们首先建立与 MySQL 数据库的连接，然后使用 ALTER TABLE 语句添加表格中的一列。最后，我们关闭数据库连接并返回添加结果。注意，为了使代码更加健壮，我们应该添加一些错误处理代码来处理可能出现的错误情况。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值