使用CSS，ajax和jQuery将新行添加到div生成的表中

newusertomysqli12

我很抱歉这个问题。我正在研究使用div标签生成表的选项，这个工作正常。我试图使用户使用jqeury添加或删除行。我的问题是，添加的行没有伪造所有列。将整个行添加到列Header1中。我已经尽一切努力解决了这个问题，但是没有任何效果，你们是我最后的希望，这就是为什么我在这里发表我的问题。

我试图制作一个可行的片段，添加新行在这里不起作用，它在我的浏览器中。

$('#addrow').click(function(){
    var length = $('.sl').length;
    var i   = parseInt(length)+parseInt(1);
    var newrow = $('#next').append('<div class="divTableRow"><div class="divTableCell"><input type="text" class="form-control sl" name="slno[]" value="'+i+'" readonly=""></div><div class="divTableCell"><input type="text" class="form-control" name="name[]" id="acc_name'+i+'" placeholder="Enter Account Name" pattern="[^()/><\][\\\x22,;|]+"></div><div class="divTableCell"><select name="rang[]" id="rang_acc'+i+'" style="width:170px !important;font-weight: normal !important;" class="form-control"><option value="Bacteria">Bacteria</option><option value="Low Life">Low Life</option><option value="Apprentice">Apprentice</option><option value="Hitman">Hitman</option><option value="Assassin">Assassin</option><option value="Local Boss">Local Boss</option><option value="Boss">Boss</option><option value="Godfather">Godfather</option></select></div><div class="divTableCell"><input type="text" class="form-control" name="phone_no[]" id="pn'+i+'" placeholder="Enter Phone No"></div><div class="divTableCell"><input type="text" class="form-control" id="age'+i+'" name="age[]" placeholder="Enter Age"></div><div class="divTableCell"><input type="date" id="dob'+i+'" name="date_of_birth[]" class="form-control"/></div><div class="divTableCell"><input type="button" class="btnRemove btn-danger" value="Remove"/></div></div>');
    
});
    
// Removing event here
$('body').on('click','.btnRemove',function() {
   $(this).closest('div').remove()
});

div.blueTable {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
    font-size: 13px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
    background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
    border-left: none;
}

.blueTable .tableFootStyle {
    font-size: 11px;
}
.blueTable .tableFootStyle .links {
    text-align: right;
}
.blueTable .tableFootStyle .links a{
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}
.blueTable.outerTableFooter {
    border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
    padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<form class="form-horizontal" action="#" method="post">
    <div class="divTable blueTable">
        <div class="divTableHeading">
            <div class="divTableRow">
                <div class="divTableHead">head1</div>
                <div class="divTableHead">head2</div>
                <div class="divTableHead">head3</div>
                <div class="divTableHead">head4</div>
                <div class="divTableHead">head5</div>
                <div class="divTableHead">head6</div>
            </div>
        </div>
        <div class="divTableBody">
            <div class="divTableRow">
                <div class="divTableCell">
                    <input type="text" class="form-control sl" name="slno[]" id="slno" value="1" readonly="">
                </div>
                <div class="divTableCell">
                    <input type="text" class="form-control" name="name[]" id="acc_name" placeholder="Enter Account Name" pattern="[^()/><\][\\\x22,;|]+">
                </div>
                <div class="divTableCell"> 
                    <select name="rang[]" id="rang_acc" style="width:120px !important;font-weight: normal !important;" class="form-control sl">  
                        <option value="Bacteria">Bacteria</option>   
                        <option value="Low Life">Low Life</option>
                        <option value="Apprentice">Apprentice</option> 
                        <option value="Hitman">Hitman</option>
                        <option value="Assassin">Assassin</option> 
                        <option value="Local Boss">Local Boss</option> 
                        <option value="Boss">Boss</option> 
                        <option value="Godfather">Godfather</option>
                    </select>
                </div>
               <div class="divTableCell"><input type="text" class="form-control" name="phone_no[]" id="pn" placeholder="Enter Phone No"></div>
               <div class="divTableCell"><input type="text" class="form-control" id="age" name="age[]" placeholder="Enter Age"></div>
               <div class="divTableCell"><input type="date" id="dob" name="date_of_birth[]" class="form-control"/></div>
            </div>
            <div id="next"></div>
        </div>
    </div>
    <br/>
    <button type="button" name="addrow" id="addrow" class="btn btn-success pull-right">Add New Row</button>
    <br/><br/>
    <button type="submit" name="submit" class="btn btn-info pull-left">Submit</button>
</form>

muka.gergely

如果要添加较长的HTML字符串，请使用反引号（`）进行插值-这样您就可以创建多行字符串
我建议您将HTML字符串（尤其是长字符串）放在点击处理程序之外。更清洁，更容易追踪
您将整个HTML字符串附加到#next而不是表主体容器divTableBody
此外，列数比您创建的单元格少
添加.parent()到您的remove功能中-现在可以使用

const tableRow = (i) => {
  return `
    <div class="divTableRow">
      <div class="divTableCell">
        <input type="text" class="form-control sl" name="slno[]" value="${ i }" readonly="">
      </div>
      <div class="divTableCell">
        <input type="text" class="form-control" name="name[]" id="acc_name${ i }" placeholder="Enter Account Name" pattern="[^()/><\][\\\x22,;|]+">
      </div>
      <div class="divTableCell">
        <select name="rang[]" id="rang_acc${ i }" style="width:170px !important;font-weight: normal !important;" class="form-control">
          <option value="Bacteria">Bacteria</option>
          <option value="Low Life">Low Life</option>
          <option value="Apprentice">Apprentice</option>
          <option value="Hitman">Hitman</option>
          <option value="Assassin">Assassin</option>
          <option value="Local Boss">Local Boss</option>
          <option value="Boss">Boss</option>
          <option value="Godfather">Godfather</option>
        </select>
      </div>
      <div class="divTableCell">
        <input type="text" class="form-control" name="phone_no[]" id="pn${ i }" placeholder="Enter Phone No">
      </div>
      <div class="divTableCell">
        <input type="text" class="form-control" id="age${ i }" name="age[]" placeholder="Enter Age">
      </div>
      <div class="divTableCell">
        <input type="date" id="dob${ i }" name="date_of_birth[]" class="form-control"/>
      </div>
      <div class="divTableCell">
        <input type="button" class="btnRemove btn-danger" value="Remove"/>
      </div>
    </div>
  `
}

$('#addrow').click(function() {
  var length = $('.sl').length;
  var i = parseInt(length) + parseInt(1);
  var newrow = $('.divTableBody').append(tableRow(i));
});

// Removing event here
$('body').on('click', '.btnRemove', function() {
  $(this).closest('div').parent().remove()
});

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}

.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 11px;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px;
}


/* DivTable.com */

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  display: table-cell;
}

.divTableHeading {
  display: table-header-group;
}

.divTableFoot {
  display: table-footer-group;
}

.divTableBody {
  display: table-row-group;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="form-horizontal" action="#" method="post">
  <div class="divTable blueTable">
    <div class="divTableHeading">
      <div class="divTableRow">
        <div class="divTableHead">head1</div>
        <div class="divTableHead">head2</div>
        <div class="divTableHead">head3</div>
        <div class="divTableHead">head4</div>
        <div class="divTableHead">head5</div>
        <div class="divTableHead">head6</div>
        <div class="divTableHead">head7</div>
      </div>
    </div>
    <div class="divTableBody">
      <div class="divTableRow">
        <div class="divTableCell"><input type="text" class="form-control sl" name="slno[]" id="slno" value="1" readonly=""></div>
        <div class="divTableCell"><input type="text" class="form-control" name="name[]" id="acc_name" placeholder="Enter Account Name" pattern="[^()/><\][\\\x22,;|]+"></div>
        <div class="divTableCell">
          <select name="rang[]" id="rang_acc" style="width:120px !important;font-weight: normal !important;" class="form-control sl">
            <option value="Bacteria">Bacteria</option>
            <option value="Low Life">Low Life</option>
            <option value="Apprentice">Apprentice</option>
            <option value="Hitman">Hitman</option>
            <option value="Assassin">Assassin</option>
            <option value="Local Boss">Local Boss</option>
            <option value="Boss">Boss</option>
            <option value="Godfather">Godfather</option>
          </select>
        </div>
        <div class="divTableCell"><input type="text" class="form-control" name="phone_no[]" id="pn" placeholder="Enter Phone No"></div>
        <div class="divTableCell"><input type="text" class="form-control" id="age" name="age[]" placeholder="Enter Age"></div>
        <div class="divTableCell"><input type="date" id="dob" name="date_of_birth[]" class="form-control" /></div>
      </div>
      <div id="next"></div>
    </div>
  </div>
  <br/>
  <button type="button" name="addrow" id="addrow" class="btn btn-success pull-right">Add New Row</button>
  <br/><br/>
  <button type="submit" name="submit" class="btn btn-info pull-left">Submit</button>
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-26

我来说两句

0 条评论

登录后参与评论

上一篇：javascript中无法理解的对象重新分配

AJAX：将新行添加到表中或使用AJAX删除

在运行时使用jQuery将新行添加到HTML表中时，如何避免生成重复的标签（id）

动态将新表行添加到jQuery

使用CSS，ajax和jQuery将新行添加到div生成的表中

使用CSS，ajax和jQuery将新行添加到div生成的表中

IE 11中的FormData未定义

如何一次从多个文本框中获取值？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

OpenCv：改变 putText() 的位置

Redux动作正常，但减速器无效

如何从JavaScript中的MP3文件读取元数据属性？

如何使用Redux-Toolkit重置Redux Store

将加号/减号添加到jQuery菜单

OpenGL纹理格式的颜色错误

获取并汇总所有关联的数据

超过时间限制错误C ++

ActiveModelSerializer仅显示关联的ID

在交互式Python Shell中获得最后结果

如何开始为Ubuntu开发

去噪自动编码器和常规自动编码器有什么区别？

Excel 2016图表将增长与4个参数进行比较

算术中的c ++常量类型转换

使用因子时如何在y轴上的ggplot中插入count或％

TreeMap中的自定义排序

如何在R中转置数据

在 React Native Expo 中使用 react-redux 更改另一个键的值