文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何跟踪通过单击复选框创建的表行的ids，何时可以随机删除

问如何跟踪通过单击复选框创建的表行的ids，何时可以随机删除
EN

Stack Overflow用户
提问于 2020-12-14 00:30:26
回答 1查看 75关注 0票数 1

​

代码语言：javascript
复制
var m=0;
var tablemap=new Map();
var booleantable=[];
var keepingvalueofsubtable=[];
$(document).ready(function()
{  var array_items=[];


var obj=$("input:checkbox:not(:checked)");

console.log(obj[0]["id"]);
for (var i = 0, l = obj.length; i < l; i++) {
   $("#"+obj[i]['id']+"form").hide();

   tablemap[i]=obj[i]['id'];
   booleantable[i]=0;
    keepingvalueofsubtable[i] = [];

}

    ;  


$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});


$('.frameopener').on('change', function(){
    {
       
           var formid=$(this).attr("id");
 
       
   
  $("#" + formid + "form").toggle();
    

}
});


 




 $('.c').click(function () {
       
 var m=$(this).attr('data-value');
 
    


    


booleantable[m]=booleantable[m]+1;

var html='<div class="div-table-row">';
             html+='<div class="div-table-col" id="zerofirst" contenteditable="true"></div>';
               html+='<div class="div-table-col" id="ZeroSecond" contenteditable="true"></div>';
                html+='<div class="div-table-col" id="one" contenteditable="true">0</div>';
                html+='<div class="div-table-col" id="two" contenteditable="true">0</div>';
               html+=' <div class="div-table-col" id="three" >0</div>';
              
               
              html+=' <div class="div-table-col"><center><div  class="del" aria-hidden="true"  data-value="0"  ><i class="fas fa-trash delete" ></i></div></center></div>';

               html+='</center></div>';
  

$("#"+tablemap[m]+"form").append(html);
alert(html);
html="";


});



 $(document).on('click','.del',function(){


alert();

//alert($(this).attr('data-value').value());
alert($(this).attr("id"));
//const slug = str.substring(str.indexOf('-') + 1);
  
//alert(slug);

  } );
 



});
代码语言：javascript
复制
 {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:1270px;
   padding:20px;
   background-color:#fff;
   border:1px solid #ccc;
   border-radius:5px;
   margin-top:25px;
   box-sizing:border-box;
  }

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
.bttn{
width:100px;
height:10px;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/e22ff3c413.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 <div class="table-responsive"><table  class="table"><tbody>
 
<tr><center> <legend>Choose your Block Items</legend><center><tr></tr><tr>
 
  <td>
    <input type="checkbox" class="frameopener" id="mobilisation" ></td><td>Mobilisation
  </td>
 
  <td>
    <input type="checkbox" class="frameopener" id="demolition" ></td><td>Demolition
  </td>
 
  <td>
    <input type="checkbox" class="frameopener" id="substructure" ></td><td>Sub Structure
  </td>
 
  <td>
    <input type="checkbox" class="frameopener" id="superstructure" ></td><td>Super Structure
  </td></tr>
 </tbody></table></div>
<form id="mobilisationform">
      <div class="div-table" id="mobilisation">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Mobilisation</div>
                <div  class="div-table-col">Unit</div>
                <div  class="div-table-col">Quantity</div>
                <div  class="div-table-col">Rate</div>
                <div  class="div-table-col">Amount</div>
                 <div  class="div-table-col"><center><div  aria-hidden="true" class="c" id="addmobilisation" data-value="0"  ><center><i class="fas fa-plus"></i></center></div><center></div>
                
              
             </div>
            <div class="div-table-row">
                 <div class="div-table-col" id="zerofirst" contenteditable="true"></div>
                <div class="div-table-col" id="ZeroSecond" contenteditable="true"></div>
                  <div class="div-table-col" id="one" contenteditable="true">0</div>
                <div class="div-table-col" id="two" contenteditable="true">0</div>
                <div class="div-table-col" id="three" >0</div>
                 <div class="div-table-col"><center><div   aria-hidden="true" class="del" id="delete-0" data-value="0"  ><i class="fas fa-trash delete" ></i></div></center></div>
            </div>

      </div>
  </form>


<form id="demolitionform">
      <div class="div-table" id="demolition">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Demolition</div>
                <div  class="div-table-col">Unit</div>
                <div  class="div-table-col">Quantity</div>
                <div  class="div-table-col">Rate</div>
                <div  class="div-table-col">Amount</div>
                 <div  class="div-table-col"><center><div  aria-hidden="true" class="c" id="adddemolition" data-value="1"  ><center><i class="fas fa-plus"></i></center></div><center></div>
                
              
             </div>
            <div class="div-table-row">
                 <div class="div-table-col" id="zerofirst" contenteditable="true"></div>
                <div class="div-table-col" id="ZeroSecond" contenteditable="true"></div>
                  <div class="div-table-col" id="one" contenteditable="true">0</div>
                <div class="div-table-col" id="two" contenteditable="true">0</div>
                <div class="div-table-col" id="three" >0</div>
                 <div class="div-table-col"><center><div   aria-hidden="true" class="del" id="delete-1" data-value="0"  ><i class="fas fa-trash delete" ></i></div></center></div>
            </div>

      </div>
  </form>


<form id="substructureform">
      <div class="div-table" id="substructure">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Sub Structure</div>
                <div  class="div-table-col">Unit</div>
                <div  class="div-table-col">Quantity</div>
                <div  class="div-table-col">Rate</div>
                <div  class="div-table-col">Amount</div>
                 <div  class="div-table-col"><center><div  aria-hidden="true" class="c" id="addsubstructure" data-value="2"  ><center><i class="fas fa-plus"></i></center></div><center></div>
                
              
             </div>
            <div class="div-table-row">
                 <div class="div-table-col" id="zerofirst" contenteditable="true"></div>
                <div class="div-table-col" id="ZeroSecond" contenteditable="true"></div>
                  <div class="div-table-col" id="one" contenteditable="true">0</div>
                <div class="div-table-col" id="two" contenteditable="true">0</div>
                <div class="div-table-col" id="three" >0</div>
                 <div class="div-table-col"><center><div   aria-hidden="true" class="del" id="delete-2" data-value="0"  ><i class="fas fa-trash delete" ></i></div></center></div>
            </div>

      </div>
  </form>


<form id="superstructureform">
      <div class="div-table" id="superstructure">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Super Structure</div>
                <div  class="div-table-col">Unit</div>
                <div  class="div-table-col">Quantity</div>
                <div  class="div-table-col">Rate</div>
                <div  class="div-table-col">Amount</div>
                 <div  class="div-table-col"><center><div  aria-hidden="true" class="c" id="addsuperstructure" data-value="3"  ><center><i class="fas fa-plus"></i></center></div><center></div>

​

为检查项列表创建一个子表.

我有一个复选框的列表。当您单击复选框时，将显示使用div生成的表。这方面的问题是，我为该表的这些行指定ids为<tablename>+<tableid>+<subtableid>.的表中有一个列，用于删除子表的行。当我从表中间单击delete时，行将被删除。跟踪未删除行的最简单方法是什么？我需要将所有行作为post传递到下一个php页面。我还需要计算的数量乘以数量和比率，并找到总量。做这件事最简单的方法是什么？

以下是我所要尝试的：

php：

代码语言：javascript
复制
foreach( $checkboxitemsafterstripper as $key => $item ){


    echo '
    <form id="'.$item.'form">
          <div class="div-table" id="'.$item.'">
                 ....'
 <div  class="div-table-col"><center><div  aria-hidden="true" class="c" id="add'.$item.'" data-value="'.$key.'"  ><center><i class="fas fa-plus"></i></center></div><center></div>
                <div   aria-hidden="true" class="del" id="delete-'.$key.'" data-value="0"  ><i class="fas fa-trash delete" ></i></div></center>

jquery：

代码语言：javascript
复制
var obj=$("input:checkbox:not(:checked)");

console.log(obj[0]["id"]);
for (var i = 0, l = obj.length; i < l; i++) {
   $("#"+obj[i]['id']+"form").hide();

   tablemap[i]=obj[i]['id'];
   booleantable[i]=0;
    keepingvalueofsubtable[i] = [];

}
$('.c').click(function () {
       
 var m=$(this).attr('data-value');

booleantable[m]=booleantable[m]+1;

var html='<div class="div-table-row">';
             html+='<div class="div-table-col" id="zerofirst" contenteditable="true"></div>';
               html+='<div class="div-table-col" id="ZeroSecond" contenteditable="true"></div>';
                html+='<div class="div-table-col" id="one" contenteditable="true">0</div>';
                html+='<div class="div-table-col" id="two" contenteditable="true">0</div>';
               html+=' <div class="div-table-col" id="three" >0</div>';
              // html+='<div class="div-table-col"><div class="del" aria-hidden="true"  id="delete-'+m+'-'+booleantable[m]+'" data-value="'+booleantable[m]+'"  ><center><i class="fas fa-trash"></i></center></div></div>';
               
              html+=' <div class="div-table-col"><center><div  class="del" aria-hidden="true"  data-value="0"  ><i id="'+tablemap[m]+'-'+m+'-'+booleantable[m]+'"class="fas fa-trash delete" ></i></div></center></div>';

               html+='</center></div>';
  

$("#"+tablemap[m]+"form").append(html);
alert(html);
html="";


});

如何执行删除部分：

代码语言：javascript
复制
$(document).on('click','.del',function(event){

console.log(event.target.id);


  } );
 



});
    ';
    }

jquery部件：

​

​

我的代码在chrome中运行得很好，但在Firefox中却不行。为什么是那样的？

以下是完整的代码：

https://pastebin.com/4TuRiVA1

我在这里放了一只小提琴：

https://jsfiddle.net/ehd94t8k/1/

javascript
php
html
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-14 06:29:33

在动态创建divs时，您需要将其绑定到静态元素，即:任何div、主体、文档等。然后，每当one或two div上的用户input使用$(this).text()和其他值使用.closest()和find()获得所需的值时，将所需的值添加到.three中。

接下来，每当单击delete按钮时，只需使用$(this).closest(".div-table-row").remove()删除整个div。

最后，为了将这些值发送到后端，可以通过迭代表单和获取所需的值并将它们推送到主数组来创建JSON。

演示代码：

​

代码语言：javascript
复制
var m = 0;
var tablemap = new Map();
var booleantable = [];
var keepingvalueofsubtable = [];
//when one is input
$(document).on('input', '.one', function() {
  //get text using this and other input using closest
  var value = parseFloat($(this).text()) * parseFloat($(this).closest(".div-table-row").find(".two").text());
  if (isNaN(value))
    value = 0;
  $(this).closest(".div-table-row").find(".three").text(value);
});
$(document).on('input', '.two', function() {
  var valuetwo = parseFloat($(this).text()) * parseFloat($(this).closest(".div-table-row").find(".one").text());
  if (isNaN(valuetwo))
    valuetwo = 0;
  $(this).closest(".div-table-row").find(".three").text(valuetwo);


});
var array_items = [];
var obj = $("input:checkbox:not(:checked)");

for (var i = 0, l = obj.length; i < l; i++) {
  $("#" + obj[i]['id'] + "form").hide();

  tablemap[i] = obj[i]['id'];
  booleantable[i] = 0;
  keepingvalueofsubtable[i] = [];

}

$('.frameopener').on('change', function() {
  {
    var formid = $(this).attr("id");
    $("#" + formid + "form").toggle();
  }
});


$('.c').click(function() {

  var m = $(this).attr('data-value');
  booleantable[m] = booleantable[m] + 1;
  //added class
  var html = '<div class="div-table-row">';
  html += '<div class="div-table-col zerofirst " contenteditable="true"></div>';
  html += '<div class="div-table-col ZeroSecond" contenteditable="true"></div>';
  html += '<div class="div-table-col one"  contenteditable="true">0</div>';
  html += '<div class="div-table-col two"  contenteditable="true">0</div>';
  html += ' <div class="div-table-col three"  >0</div>';
  html += ' <div class="div-table-col"><center><div  class="del" aria-hidden="true"  data-value="0"  ><i class="fas fa-trash delete" >delete</i></div></center></div>';

  html += '</center></div>';


  $("#" + tablemap[m] + "form").append(html);
  alert(html);
  html = "";


});


$(document).on('click', '.del', function() {
  $(this).closest(".div-table-row").remove() //remove rows
});


$("button.submit").click(function() {
  var main_array = new Array()
  //form which is visible
  $("form:visible").each(function() {
    //get id
    var table_of = $(this).attr('id');
    var main_inside = {} //create obj
    main_inside[table_of] = new Array();
    //loop through rows not first
    $(this).find(".div-table-row:not(:first)").each(function() {
      var inputs = {}; //creat obj
      //get values
      inputs["zeroone"] = $(this).find(".div-table-col:eq(0)").text();
      inputs["zerotwo"] = $(this).find(".div-table-col:eq(1)").text();
      inputs["one"] = $(this).find(".div-table-col:eq(2)").text();
      inputs["two"] = $(this).find(".div-table-col:eq(3)").text();
      inputs["three"] = $(this).find(".div-table-col:eq(4)").text();
      main_inside[table_of].push(inputs); //push in main_inside 


    })
    main_array.push(main_inside) //finally push in main array


  })
  console.log(main_array)
  //your json ..stringfy  & ajax request

})
代码语言：javascript
复制
body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.box {
  width: 1270px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 25px;
  box-sizing: border-box;
}

.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px;
  /* cellspacing:poor IE support for  this */
}

.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 200px;
  background-color: #ccc;
}

.bttn {
  width: 100px;
  height: 10px;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table">
    <tbody>
      <center>
        <legend>Choose your Block Items</legend>
      </center>

      <tr>

        <td>
          <input type="checkbox" class="frameopener" id="mobilisation"></td>
        <td>Mobilisation
        </td>

        <td>
          <input type="checkbox" class="frameopener" id="demolition"></td>
        <td>Demolition
        </td>


      </tr>
    </tbody>
  </table>
</div>
<form id="mobilisationform">
  <div class="div-table" id="mobilisation">
    <div class="div-table-row">
      <div class="div-table-col" align="center">Mobilisation</div>
      <div class="div-table-col">Unit</div>
      <div class="div-table-col">Quantity</div>
      <div class="div-table-col">Rate</div>
      <div class="div-table-col">Amount</div>
      <div class="div-table-col">
        <center>
          <div aria-hidden="true" class="c" id="addmobilisation" data-value="0">
            <center><i class="fas fa-plus">add</i></center>
          </div>
        </center>
      </div>


    </div>
    <div class="div-table-row">
    <!--added class-->
      <div class="div-table-col zerofirst" contenteditable="true"></div>
      <div class="div-table-col ZeroSecond" contenteditable="true"></div>
      <div class="div-table-col one" contenteditable="true">0</div>
      <div class="div-table-col two" contenteditable="true">0</div>
      <div class="div-table-col three" class="three">0</div>
      <div class="div-table-col">
        <center>
          <div aria-hidden="true" class="del" id="delete-0" data-value="0"><i class="fas fa-trash delete">delete</i></div>
        </center>
      </div>
    </div>

  </div>
</form>


<form id="demolitionform">
  <div class="div-table" id="demolition">
    <div class="div-table-row">
      <div class="div-table-col" align="center">Demolition</div>
      <div class="div-table-col">Unit</div>
      <div class="div-table-col">Quantity</div>
      <div class="div-table-col">Rate</div>
      <div class="div-table-col">Amount</div>
      <div class="div-table-col">
        <center>
          <div aria-hidden="true" class="c" id="adddemolition" data-value="1">
            <center><i class="fas fa-plus">add</i></center>
          </div>
        </center>
      </div>


    </div>
    <div class="div-table-row">
      <div class="div-table-col zerofirst" contenteditable="true"></div>
      <div class="div-table-col ZeroSecond" contenteditable="true"></div>
      <div class="div-table-col one" contenteditable="true">0</div>
      <div class="div-table-col two" contenteditable="true">0</div>
      <div class="div-table-col three">0</div>
      <div class="div-table-col">
        <center>
          <div aria-hidden="true" class="del" id="delete-1" data-value="0"><i class="fas fa-trash delete">delete</i></div>
        </center>
      </div>
    </div>

  </div>
</form>


<button class="submit" type="submit">Submit All</button>
<out></out>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65282207

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档