Javascript 切换滑动按钮在数据表中丢失位置

我正在做一个小项目，我有两个问题

当玩切换滑动按钮时，你会看到它们正在失去位置，圆点在其边界移动时停留在原来的位置。我想这是由课文引起的

没有数据表，按钮工作正常

这是我的css：

    .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================
  SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 50px;
    height: 29px;
    background-color: #f1f1f1;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}
input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;

    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 20px;
    background-color: #dd0012;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius:10px;
    border-radius: 30px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.2s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
    background-color: #f1f1f1;
}
input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 21px;
    background-color: #00e114;
}

.op_name{
  display:inline-flex;
}

.switch{
  display:inline-flex;
}
#example > tbody > tr > td {
    white-space: nowrap;
}

当点击编辑按钮时-模式显示，但内容-所有数据延迟显示。。。。iv'e尝试从模型中删除“淡入淡出”类-并解决了问题-但如果我不这样做，会怎样失去淡入淡出效果

---

问题2。您可以尝试以下方法：

$(document).ready(function(){
    $("#myBtn").click(function(){
        // reference p into modal-body. Here you load all the data
        $("#content").html("The content") 
        $("#myModal").modal(); // finally open the modal
    });
});

或者你可以用模态evets来修复它。此处的文档：

---

希望我能帮助您。

通过添加

`.toggle_btn{
   display: inline-flex;
  }

 .switch{
   margin-left: 85px;
  }
 .op_name{
  position: absolute;
  margin-left: 15px;
  margin-top: 7px;
 }
  ` 

---

很高兴见到你！；）