表格新增行，删除行，并且序号跟着变

最新推荐文章于 2023-08-07 17:59:34 发布
最新推荐文章于 2023-08-07 17:59:34 发布
阅读量2.6k 收藏
点赞数
分类专栏： web前端 文章标签： jquery class input html table function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newyear1988/article/details/7740487
版权

<script src="./jquery.min.js" type="text/javascript"></script>
<style>
.inputTask input {
 width: 95%;
 height: 20px;
}

.inputhours input {
 width: 30px;
 height: 20px;
 padding-left: 20px !important;
 border: 1px solid #7F9DB9;
}

.inputhours2 input {
 width: 30px;
 height: 20px;
 padding-left: 20px !important;
 border: 1px solid white;
}

.inputhours3 input {
 width: 52px;
 height: 17px;
 padding-left: 20px !important;
 border: 1px solid white;
}

.inputpro {
 width: 130px;
 height: 17px;
 border: 1px solid white;
}

.inputHighlighted {
 background-color: #317082;
 color: #FFF;
 width: 300px;
 border: 1px solid #000;
}

.hoursContent input.focus {
 outline: solid 1px #FF942B;
}

.inputsave {
 background:
  url("/html/portlet/ext/XAprojectManage/style/images/operation/save.jpg");
 background-position: 5px 1px;
 background-repeat: no-repeat;
}

.inputpass {
 background:
  url("/html/portlet/ext/XAprojectManage/style/images/operation/pass.jpg");
 background-position: 5px 1px;
 background-repeat: no-repeat;
}

.inputfail {
 background:
  url("/html/portlet/ext/XAprojectManage/style/images/operation/fail.jpg");
 background-position: 5px 1px;
 background-repeat: no-repeat;
}

.inputwait {
 background:
  url("/html/portlet/ext/XAprojectManage/style/images/operation/wait.jpg");
 background-position: 5px 1px;
 background-repeat: no-repeat;
}

.linetop {
 border-top: 1px solid #000099;
}

.lineright {
 border-right: 1px solid #000099;
}

.linebottom {
 border-bottom: 1px solid #000099;
}

.lineleft {
 border-left: 1px solid #000099;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
 clear: both;
}
</style>

 

<div style="margin-top:6px;">
<input type="button" value="添加行" οnclick="addcur();"
 class="approve_btn" />
</div>
<table width="100%" name="tableContent" id="tableContent" style="margin-top:12px;"
 class="HOURS" cellpadding="0" cellspacing="0">
 <tr height="35" id="THday" align="center">
  <td width="5%" class="linebottom linetop lineleft"
   style="background-color: #E6EDFD;">&nbsp;</td>
  <td width="5%" class="linebottom linetop "
   style="background-color: #E6EDFD;" align="center">主题</td>
  <td width="18%" class="linebottom linetop lineleft"
   style="background-color: #E6EDFD;" align="center">主题<font color="red">*</font></td>
  <td width="13%" class="linebottom lineright linetop lineleft"
   style='background-color: #E6EDFD;'>主题<font color="red">*</font></td>
  <td width="23%" class="linebottom linetop lineleft lineright"
   style="background-color: #E6EDFD;">主题<font color="red">*</font></td>
  <td width="8%" class="linebottom lineright linetop"
   style='background-color: #E6EDFD;'>主题</td>
  <td width="10%" class="linebottom lineright linetop"
   style='background-color: #E6EDFD;'>主题</td>
 </tr>
 <tbody id="clonetab">
  <tr align="center">
   <td class="linebottom linetop lineleft"></td>
   <td class="linebottom linetop "><input type="hidden" name="questionNo" id="questionNo1" value="1"/>1</td>
   <td class="linebottom linetop lineleft"><textarea style='margin:10px;' cols="50" rows="3" name="questionDesc"
    id="questionDesc1" οnkeyup="deleteValidationErrorMassage('questionDesc1');"></textarea></td>
   <td class="linebottom linetop lineleft"><select id="questionType1"
    name="questionType" οnchange="deleteValidationErrorMassage('questionType1');changeType(this,'questionType1');">
    <option value="">--请选择--</option>
    <option value="radio">单选</option>
    <option value="checkbox">多选</option>
    <option value="other">其他</option>
   </select></td>
   <td class="linebottom lineright linetop lineleft">
   <table id="answer1">
    <tr align="center">
     <td > <img
      src="./2.jpg"
      οnclick="doplus(this);" alt="44" title="44" style='cursor:pointer;'/><!--  <input  type="button" class="plus" οnclick="doplus(this);" value="" />--></td>
     <td><input type='hidden' value='65' name='alpha' id='answer1alpha1'/><input type='hidden' value="1" name='currRow'/>A</td>
     <td><input type="text"  width='128px;' name="answerOption" id="answer1Option1"
      οnkeyup="deleteValidationErrorMassage('answer1Option1');" /></td>
     <td width='25px'>&nbsp;</td>
    </tr>
    <tr>
     <td>&nbsp;</td>
     <td><input type='hidden' value='66' name='alpha' id='answer1alpha2'/><input type='hidden' value="1" name='currRow'/>B</td>
     <td><input type='hidden' value="2" name='currRow'/><input type="text" width="128px" name="answerOption" id="answer1Option2"
      οnkeyup="deleteValidationErrorMassage('answer1Option2');" /></td>
     <!-- <td><input type="button" class="minus" οnclick="dominus(this);" name="answerOption"/></td> -->
       <td><img style='margin-left:3px;cursor:pointer;' src='./1.jpg' οnclick='dominus(this);'  alt='33' title='33'/></td>
    </tr>
   </table>
   </td>
   <td class="linebottom lineright linetop"><input type="hidden" name="requiredHidden" id="requiredHidden1" value="0"/><input type="checkbox" name="required" id="required1" value="0" οnclick="if(this.checked){jQuery('#requiredHidden1').val('1');}else{jQuery('#requiredHidden1').val('0');}"/></td>
   <td class="linebottom lineright linetop"><input type="hidden" name="inputBoxRequiredHidden" id="inputBoxRequiredHidden1"  value="0"/><input type="checkbox" name="inputBoxRequired" id="inputBoxRequired1" value="0" οnclick="if(this.checked){jQuery('#inputBoxRequiredHidden1').val('1');}else{jQuery('#inputBoxRequiredHidden1').val('0');}"/></td>
  </tr>
 </tbody>
</table>
</form>
</div>
<br/>
<script type="text/javascript">


function newRows(){
 
 var resultId = 0;
 jQuery("input[name='questionNo']").each(function(){
  var value1 = jQuery(this).val();
  if(value1 != "" && value1 != null){
   if(parseInt(value1) > parseInt(resultId))
    resultId = value1; 
  }
 });
 var newId=0;
 if(parseInt(resultId)!=0){
  newId=parseInt(resultId)+ 1;
 }
 return newId;
}

function addcur(){
   //var sumrow=rownum();
      var newId=newRows();
  
  var html="<tr height='35' align='center'>";
  html+="<td align='center'width='5%' class='linebottom lineleft'><img title='删除行' οnclick='deleteRow(this)' alt='删除' src='./1.jpg' style='cursor: hand;'></td>";
  html+="<td width='5%' class='linebottom linetop'><input type='hidden' name='questionNo' id='questionNo"+newId+"' value='"+newId+"'/>"+newId+"</td>";
  html+="<td width='18%' class='linebottom lineleft'><textarea  cols='50' rows='3' style='margin:10px;' name='questionDesc' id='questionDesc"+newId+"' οnkeyup='deleteValidationErrorMassage(\"questionDesc"+newId+"\");'></textarea></td>";
  html+="<td width='13%' class='linebottom linetop lineleft'><select  name='questionType' id='questionType"+newId+"' οnchange='changeType(this,\"questionType"+newId+"\");deleteValidationErrorMassage(\"questionType"+newId+"\");'><option value=''>--请选择 --</option>"
   +"<option value='radio'>单选</option><option value='checkbox'>多选</option><option value='other'>其他</option></select></td>";
  html+="<td width='23%' class='linebottom linetop lineleft'><table id='answer"+newId+"' name='answer'><tr align='center' ><td><img src='./2.jpg' style='cursor:pointer;' οnclick='doplus(this);' alt='999' title='99' /></td><td><input type='hidden' value='1' name='currRow'/><input type='hidden' value='65' name='alpha' id='answer"+newId+"alpha1'/>A</td><td><input type='text'  width='128px;' name='answerOption' id='answer"+newId+"Option1' οnkeyup='deleteValidationErrorMassage(\"answer"+newId+"Option1\");'/></td><td width='25px'>&nbsp;</td></tr><tr><td>&nbsp;</td><td><input type='hidden' value='2' name='currRow'/><input type='hidden' value='66' name='alpha' id='answer"+newId+"alpha2'/>B</td><td><input type='text' witdh='128px' name='answerOption' name='answerOption' id='answer"+newId+"Option2' οnkeyup='deleteValidationErrorMassage(\"answer"+newId+"Option2\");'/></td> <td><img style='margin-left:3px;cursor:pointer;' src='./1.jpg' οnclick='dominus(this);'  alt='99' title='99'/></td></tr></table></td>";
  html+="<td width='8%' class='linebottom linetop lineleft'><input type='hidden' name='requiredHidden' id='requiredHidden"+newId+"' value='0'/><input type='checkbox' name='required' id='required"+newId+"' value='0' οnclick='changeValueRequired(this,\"requiredHidden"+newId+"\");'/></td>";
  html+="<td width='10%' class='linebottom lineleft lineright'><input type='hidden' name='inputBoxRequiredHidden' id='inputBoxRequiredHidden"+newId+"' value='0'/><input type='checkbox' name='inputBoxRequired' id='inputBoxRequired"+newId+"' value='0' οnclick='changeValueRequired(this,\"inputBoxRequiredHidden"+newId+"\");'/></td>";
  jQuery(html).appendTo(jQuery("#clonetab"));
        
 }

//\u63a7\u5236\u9875\u9762\u6700\u5927\u884c\u6570
function rownum(){
 //\u83b7\u5f97\u9875\u9762\u4e0a\u663e\u793a\u7684\u884c\u6570
 var pageRow = document.getElementsByName("questionDesc");
 var sumrow=pageRow.length;
 return sumrow;
}

//\u5220\u9664\u884c
function deleteRow(obj){
 var pageRow = document.getElementsByName("questionDesc");
 if(pageRow.length==1){
  alert("\u65e0\u6cd5\u5220\u9664\u4ec5\u6709\u6b64\u884c\uff01");
 }else{
  var rowss=jQuery(obj).parent('td').parent('tr')[0].rowIndex;
  var rowSize = jQuery('#tableContent > tbody:nth-child(2) > tr').size();
  for (var i = Number(rowss); i <= Number(rowSize); i ++) {
   html="<tr height='35' align='center'>";
   html+="<td align='center' width='5%' class='linebottom lineleft'><img title='删除行' οnclick='deleteRow(this)' alt='3' src='./1.jpg' style='cursor: hand;'></td>";
   html+="<td width='5%' class='linebottom linetop'><input type='hidden'  name='questionNo' value='"+i+"'/>"+i+"</td>";
   var oldquestionDesc = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(3) > textarea:first-child').val();
   html+="<td width='18%' class='linebottom lineleft'><textarea  cols='50' rows='3' style='margin:10px;' name='questionDesc' id='questionDesc"+i+"' οnkeyup='deleteValidationErrorMassage(\"questionDesc"+i+"\");'>"+oldquestionDesc+"</textarea></td>";
   var oldquestionTypeVal = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(4) > select:first-child').val();
   var oldquestionType = "<option value=''>--单选 --</option><option value='radio'";
   if ("radio"==oldquestionTypeVal) {
    oldquestionType+=" selected";
   }
   oldquestionType+=" >多选</option><option value='checkbox'";
   if ("checkbox"==oldquestionTypeVal) {
    oldquestionType+=" selected";
   }
   oldquestionType+=" 其他</option><option value='other'";
   if ("other"==oldquestionTypeVal) {
    oldquestionType+=" selected";
   }
   oldquestionType+=" >\u5176\u4ed6</option>";
   html+="<td width='13%' class='linebottom linetop lineleft'><select name='questionType' id='questionType"+i+"' οnchange='deleteValidationErrorMassage(\"questionType"+i+"\");changeType(this,\"questionType"+i+"\");'>"
    +oldquestionType+"</select></td>";
   html+="<td width='23%' class='linebottom linetop lineleft'><table id='answer"+i+"' name='answer'>";
   if ("other"!=oldquestionTypeVal) {
    var ansSize = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(5) > table:first-child > tbody:first-child > tr').size();
    for (var j = 1; j <= Number(ansSize); j++) {
     var currRow = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(5) > table:first-child > tbody:first-child > tr:nth-child('+j+') > td:nth-child(2) > input[name="currRow"]').val();
     var alpha = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(5) > table:first-child > tbody:first-child > tr:nth-child('+j+') > td:nth-child(2) > input[name="alpha"]').val();
     var ans = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(5) > table:first-child > tbody:first-child > tr:nth-child('+j+') > td:nth-child(3) > input[name^="answerOption"]').val();
     html+="<tr align='center'><td>";
     if (j == 1) {
      html+="<img src='./1.jpg' style='cursor:pointer;' οnclick='doplus(this);' alt='\u589e\u52a0\u7b54\u6848' cursor='pointer'/>";
     }
     html+="</td><td><input type='hidden' value='"+currRow+"' name='currRow'/><input type='hidden' value='"+alpha+"' name='alpha' id='answer"+i+"alpha"+j+"'/>"+String.fromCharCode(alpha)+"</td><td><input value='"+ans+"' type='text' width='128px' name='answerOption' id='answer"+i+"Option"+j+"' οnkeyup='deleteValidationErrorMassage(\"answer"+i+"Option"+j+"\");'/></td><td width='25px'>";
     if (j >= 2) {
      html+="<img src='./1.jpg' style='cursor:pointer;' οnclick='dominus(this);' cursor='pointer' alt='\u5220\u9664'/>";
     }
     html+="</td></tr>";
    }
   }
   html+="</table></td>";
   var isReq = jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+') > td:nth-child(6) > input[name="required"]').is(':checked');
   var reqStr = isReq == true ? 'checked' : '';
   html+="<td width='8%' class='linebottom linetop lineleft'><input "+reqStr+" type='checkbox' id='required"+i+"' name='required' value='0' οnclick='changeValueRequired(this,\"requiredHidden"+i+"\");'/> <input type='hidden' name='requiredHidden' id='requiredHidden"+i+"' value='0' /></td>";
   var isBox = jQuery('#tableContent > tbody:nth-child(2)> tr:nth-child('+(i+1)+') > td:nth-child(7) > input[name="inputBoxRequired"]').is(':checked');
   var boxStr = isBox == true ? 'checked' : '';
   html+="<td width='10%' class='linebottom lineleft lineright'><input "+boxStr+" type='checkbox' id='inputBoxRequired"+i+"' name='inputBoxRequired' value='0' οnclick='changeValueRequired(this,\"inputBoxRequiredHidden"+i+"\");'/> <input type='hidden' name='inputBoxRequiredHidden' id='inputBoxRequiredHidden"+i+"' value='0' /></td>";
   html+="</tr>";
   jQuery('#tableContent > tbody:nth-child(2) > tr:nth-child('+(i+1)+')').replaceWith(html);
  }
  jQuery(obj).parent('td').parent('tr').remove();
 }  
}


function doplus(obj){
 
 var cTr = jQuery(obj).parent('td').parent('tr').parent('tbody').parent('table').parent('td').parent('tr');
 var trId = cTr.get(0).rowIndex;
 var pageRow = jQuery('#answer'+trId+' tbody:nth-child(1) tr').size();
  if(pageRow>=10){
    alert("超过10行");
  }else{
 var colvar;
 var colam;
 var tt;
 var currRow=2;//\u91cc\u9762Table\u5f53\u524d\u884c\u53f7;\u5373\uff1a\u6bcf\u884c\u9009\u9879A\u4e3a\u7b2c\u4e00\u884c\uff0c\u9009\u9879B\u4e3a\u7b2c\u4e8c\u884c\uff0c\u9012\u589e
 jQuery("table#answer"+trId+" input[name='alpha']").each(function(){
   tt = jQuery(this).val();
 });
 if(tt==undefined||tt==""){
  colvar=67;
 }else{
  colvar=Number(tt)+1;
 }
 jQuery("table#answer"+trId+" input[name='currRow']").each(function(){
  currRow = jQuery(this).val();
 });
 currRow=Number(currRow)+1;
 var html="<tr><td>&nbsp;</td>";
  html+="<td><input type='hidden' value="+currRow+" name='currRow'/><input type='hidden' value="+colvar+" name='alpha' id='answer"+trId+"alpha"+currRow+"'/>"+ String.fromCharCode(colvar)+"</td><td><input type='text' name='answerOption' id='answer"+trId+"Option"+currRow+"'/></td>";
  html+="<td width='25px'><img style='margin-left:3px;cursor:pointer;' src='./1.jpg' οnclick='dominus(this);'  alt='33' title='33'/></td>";
 jQuery(html).appendTo(jQuery('#answer'+trId+''));
   }
}
//\u5220\u9664\u91cc\u9762Table\u884c
function dominus(obj){
 var pageRow = document.getElementsByName("alpha");
 if(pageRow.length==0){
  alert("\u65e0\u6cd5\u5220\u9664\u4ec5\u6709\u6b64\u884c\uff01");
 }else{
  
  var cTr = jQuery(obj).parent('td').parent('tr').parent('tbody').parent('table').parent('td').parent('tr');
  var rowss = cTr.get(0).rowIndex;//\u5916\u9762Table\u5f53\u524d\u884c\u53f7
  var cTr2 = jQuery(obj).parent('td').parent('tr');
  var trId=cTr2.get(0).rowIndex;//\u91cc\u9762Table\u5f53\u524d\u884c\u53f7
  var oldquestionTypeVal=jQuery("#questionType"+rowss+"").val();
      var rowSize = jQuery('#answer'+rowss+' tbody:nth-child(1) tr').size();//\u91cc\u9762Table\u603b\u957f\u5ea6
  if ("other"!=oldquestionTypeVal) {
   for (var j = Number(trId)+1; j <Number(rowSize); j++) {
     var html="";
     var currRow =j;
     var alpha = jQuery('#answer'+rowss+'alpha'+currRow+'').val();
     var ans = jQuery('#answer'+rowss+'Option'+(currRow+1)+'').val();
     html+="<tr align='center'><td>";
     if (currRow == 1) {
      html+="<img src='./1.jpg' style='cursor:pointer;' οnclick='doplus(this);' alt='\u589e\u52a0\u7b54\u6848' cursor='pointer'/>";
     }
     html+="</td><td><input type='hidden' value='"+currRow+"' name='currRow'/><input type='hidden' value='"+alpha+"' name='alpha' id='answer"+rowss+"alpha"+currRow+"'/>"+String.fromCharCode(alpha)+"</td><td><input value='"+ans+"' type='text'  width='128px;' name='answerOption' id='answer"+rowss+"Option"+currRow+"' οnkeyup='deleteValidationErrorMassage(\"answer"+rowss+"Option"+currRow+"\");'/></td><td width='25px'>";
     if (currRow >= 2) {
      html+="<img src='./1.jpg' style='cursor:pointer;' οnclick='dominus(this);' cursor='pointer' alt='\u5220\u9664'/>";
     }
     html+="</td></tr>";
     jQuery('#answer'+rowss+' tbody:first-child tr:nth-child('+j+')').replaceWith(html); 
    }
  }
  
  jQuery('#answer'+rowss+' tbody:last-child tr:last-child').remove();
 }
 
}


function countAnswerNum(){
 var answerNumString="";
 var sum=rownum();
 for(var i=1;i<=Number(sum);i++){
  var rowTableLength=document.getElementById('answer'+i+'').rows.length;
  answerNumString+=rowTableLength+",";
 }
 return answerNumString;  
}


</script>

 

 

 

newyear1988
关注
专栏目录
多选内容的增删改变时序号自动更新
shinjie1210的博客
08-10 510
简单记录下 大概实现效果：点击多选的内容自带序号，会根据选择的顺序、选择数量自动更新序号，如下图： 首先模拟一组数据，就来个长度30的图片数组吧 imgInit() { for (var i = 1; i <= 30; i++) { this.imgList.push({ id: i, url: '自定义图片地址', name: '图片' + i, ischeck: false, checkOrder: 0 .
Java实现列表（一行数据）上移，下移操作
m0_50255424的博客
01-19 1099
实现思路: 1:在数据库对要排序的表格添加一个sort_num字段进行排序 2.每当新增一条记录时,sort_num的值会增加1 , https://editor.csdn.net/md/?articleId=112839525 (为了防止高并发问题,参照此处进行排序增值) 3.列表向上移动的时候查询出当前数据的上一条数据的sort_num值，两者交换sort_num值，同理向下移动的时候，查询出下一条数据的sort_num值，两者交换 (上移：取上一条记录排序号，将当前记录与上一条记录排序号调换位
vue新增删除内容排序问题解决处理
withkai44的博客
07-17 638
本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创建是E选项。再或者就是ABCD四个选项位置删除任意一个后，顺序被打乱等，最后解决了，就是多写好几行代码，有点繁琐。1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。 2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题 3.可以根据需要删除对应的答题选项，添加新答题类型
删除table中的一行后次数正常排列
BiangBaing的博客
07-29 260
问题：比如删除第四次服务，第一列显示的次数顺序就会缺少4，排列为1、2、3、5、6、7 最终效果：删除中间任意一条，排序依然正常排序 思路： 点击任意删除，获取到当前点击条数的下标，将一整个数组拆分为两个数组。 数组b为从第一条数据到所点击删除之前的。 数组arr为点击删除到最后一条数据 点击删除之后将arr数组中第几次服务的第几次全部-1，达到序列正常的效果。然后再将数组a与arrpush进所循环的数组 代码片段 HTML部分 englistRemove(index){ // 删除其中一条 .
【React+antd】React结合antd实现表格的增删改查
qq_46105844的博客
07-22 5431
采用 React + Antd + JavaScript + axios ，完成了简单Table的增删改查功能
PowerBI入门学习笔记
qq_45272190的博客
07-19 4326
下载安装 我是Win10系统，在微软商店里直接下载PowerBI desktop，打开即可。 界面如下： 接下来导入后面要用到的数据，我目前用的都是Excel文件，“获取数据”，选中后选择要导入的若干个工作表： 点击“加载数据”就进入到power query编辑器，用于对数据进行清洗等操作。进入pq还有几种方式，比如当你直接确定导入工作表了，可以点击【主页】中的【转换数据】或右键某个你要清洗的表，点击【编辑查询】。 一、Power Query （一） 横向追加数据 1. 添加列 在pq的【添加列】中，
VB速查大全(数据库、表格及报表编程) ★ VB错误处理，ado常见错误，VB数据类型等，网上有很多教程是错的，强烈建议看此文
ecz00的专栏
05-19 8016
VB异常处理 (很重要) ado常见错误 ado游标及锁定介绍 免费报表控件 免费表格控件 vb数据类型(很多程序出问题出在这个，一定要看，VB msdn说的不太对) VB可用的AES加密sqlite_odbc 及 cairo_sqlite (VBRichClient自带的非odbc连接) 有vbRichClient代替winsock、实现vb多线程及远程调用activeX等
Excel技能培训之十五 函数使用rank,Frequency,subtotal超级表，切片器,iferor,常用错误代码
pengweismile的专栏
12-03 1154
rank()函数，排名函数 中国喜欢用的排名 函数 =SUMPRODUCT(($G$2:$G$21>G2)*(1/(COUNTIF($G$2:$G$21,$G$2:$G$21))))+1 Frequency函数使用 结果 Subtotal的使用 1-11 根据筛选数据项进行统计 100-101 手动隐藏的项也会被统计到 SUBTOTAL（1~11；101~111） 1 AVERAGE 平均值 2 COUNT 数值计数 ...
vue实现表格的增删改查（简易版）
qq_75222206的博客
07-13 2851
Vue是一种流行的JavaScript框架，用于构建用户界面。它被设计成易于使用和灵活的，可以与现有的项目集成。Vue具有响应式的数据绑定和组件化的架构，使开发者能够轻松地构建交互性强的单页应用程序。Vue还具有丰富的生态系统，包括插件和工具，使开发过程更加高效。
前端vue实现表格的增删功能方法
最新发布
Caoshilong1的博客
08-07 182
【代码】前端vue实现表格的增删功能方法。
【ant design vue】a-table组件默认排序
weixin_55846296的博客
03-14 8000
项目需求：要求日报表格有按照创建时间、工作时间排序，并且初始化时按照创建时间倒序排列
【ant design vue】a-table列排序
weixin_42322886的博客
11-18 3200
查询某个功能记录可点击某列进行排序，使用 ant 中的 a-tabel 组件。首先新建表格，在表格中声明change事件。这里涉及到了分页，所以每次排序我都会调用API再次获取数据，如果只是当前页进行排序，就不用调用了。ascend代表升序，descend代表降序。
ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
热门推荐
weixin_45123696的博客
01-18 2万+
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行 场景 效果如下 实现 首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList， 并且通过 添加了勾选框。 然后通过@selection-change="handleDetailSelectionChange设置其勾选框改变事件。 这里的数据源bcglXiangXiList要提前声明 data() { return { //详细list bcglXiangXiList: [], 这里的每一列是不同的
vue中用原生table写可编辑表格 , 点击按钮添加行 , 点击序号删除行
weixin_49577940的博客
12-22 2946
主要功能 : 1 , 一个表格 , 单元格内容是循环渲染的 , 点击每个单元格弹出一个输入框 , 编辑内容 2 , 点击按钮添加行 , 点击序号删除行 刚开始想用插件写的 ,网上找了半天, 研究好久搞不出来需要的效果, 最后还是自己用table标签手写实现的 <template> <div> <table class="tb1"> <tr class="th"> &l...
jQuery实现table列的隐藏和展示
03-28 1万+
$(document).ready(function(){               $("td:eq(2)",$("tr")).hide();              $("td:eq(3)",$("tr")).hide();               $("td:eq(4)",$("tr")).hide();             $("#button1").click
cursor的形状
03-28 2657
Example：CSS鼠标手型效果 CSS鼠标手型效果 Example：CSS鼠标手型效果 CSS鼠标手型效果 注：pointer也是小手鼠标，建议大家用pointer，因为它可以兼容多种浏览器。 Example：CSS鼠标由系统自动给出效果 CSS鼠标由系统自动给出效果 Example：CSS鼠标十字型 效果 CSS鼠标十字型 效果 Example：CSS鼠标I字型效果 CSS鼠标I字
axure表格新增行序号自动增加
06-09
在 Axure 中，你可以在表格中新增行并且实现序号自动增加的功能。以下是一个简单的例子： 1. 首先，在 Axure 中创建一个表格，包含需要自动增加序号的列。 2. 在表格的第一行第一列中输入初始值（比如1）。 3. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值