在前面的输入元素之前添加html输入元素

时间：2016-04-15 12:24:58

标签： javascript jquery html css

我有以下设置（如果展开，可以运行代码段）：

Set
*, *::before, *::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#bendPointBlock {
    width: 752px;
    margin-top: 25px;
    border: 1px solid #4285F4;
    font-size: 0px;
}
.colTitle {
    display:inline-block;
    width: 125px;
    height: 30px;
    background: #4285F4;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 14px;
}

.colData {
    display:inline-block;
    width: 125px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #000;
    font-size: 14px;
    border: 0px;
    border-right: 1px solid #BBB;
}

.colDataBorder {
    display:block;
    width: 770px;
    border-bottom: 1px solid #BBB;
}

.rowButton {
    display: inline-block;
    width: 35px;
    height: 35px;
    font-size: 30px;
    color: #FFF;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    margin-top: 5px;
}

.addRow {
    background: #3CBC3C;
    margin-left: 678px;
}

.addRow:hover {
    background: #46C646;
}

.addRow:active {
    background: #149414;
}

我想要完成的是，每次单击添加按钮时，我会在最后一行之前追加所有输入的另一行（如代码片段中所示）。

我已经开始了以下内容：

<div id="block">
  <span class="colTitle">Type</span>
  <span class="colTitle">Number</span>
  <span class="colTitle">X</span>
  <span class="colTitle">Y</span>
  <span class="colTitle">Z</span>
  <span class="colTitle">Last</span>
  <form action="" id="formId">
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_1" class="colData">
    <input type="text" name="rowX_1" class="colData">
    <input type="text" name="rowY_1" class="colData">
    <input type="text" name="rowZ_1" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_2" class="colData">
    <input type="text" name="rowX_2" class="colData">
    <input type="text" name="rowY_2" class="colData">
    <input type="text" name="rowZ_2" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_3" class="colData lastRow">
    <input type="text" name="rowX_3" class="colData lastRow">
    <input type="text" name="rowY_3" class="colData lastRow">
    <input type="text" name="rowZ_3" class="colData lastRow">
    <input type="text" name="type_2" class="colData lastRow">
    <span class="colDataBorder"></span>
  </form>
</div>
<span class="addRow rowButton">+</span>

非常感谢任何帮助！

1 个答案:

答案 0 :(得分：1)

您需要找到使用:last的.after() colDataBorder。另请注意：在示例中，我使用了\多行字符串变量

$(".addRow").click(function (){
    //propogate a row before the current last row
    //I have the following but unsure of how to add before the last row
    $("#formId span.colDataBorder:last").after('<input type="text" name="type" class="colData"> \
                           <input type="text" name="rowNum_#" class="colData">\
                           <input type="text" name="rowX_#" class="colData">\
                           <input type="text" name="rowY_#" class="colData">\
                           <input type="text" name="rowZ_#" class="colData">\
                           <input type="text" name="type_#" class="colData">\
                           <span class="colDataBorder"></span>\
                        ');
});

＆＃13;
＆＃13; 
 $(".addRow").click(function (){
        //propogate a row before the current last row
        //I have the following but unsure of how to add before the last row
        $("#formId span.colDataBorder:last").after('<input type="text" name="type" class="colData"> \
                               <input type="text" name="rowNum_#" class="colData">\
                               <input type="text" name="rowX_#" class="colData">\
                               <input type="text" name="rowY_#" class="colData">\
                               <input type="text" name="rowZ_#" class="colData">\
                               <input type="text" name="type_#" class="colData">\
                               <span class="colDataBorder"></span>\
                            ');
    });
＆＃13; 
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#bendPointBlock {
  width: 752px;
  margin-top: 25px;
  border: 1px solid #4285F4;
  font-size: 0px;
}
.colTitle {
  display: inline-block;
  width: 125px;
  height: 30px;
  background: #4285F4;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
.colData {
  display: inline-block;
  width: 125px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #000;
  font-size: 14px;
  border: 0px;
  border-right: 1px solid #BBB;
}
.colDataBorder {
  display: block;
  width: 770px;
  border-bottom: 1px solid #BBB;
}
.rowButton {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-size: 30px;
  color: #FFF;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  margin-top: 5px;
}
.addRow {
  background: #3CBC3C;
  margin-left: 678px;
}
.addRow:hover {
  background: #46C646;
}
.addRow:active {
  background: #149414;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
  <span class="colTitle">Type</span>
  <span class="colTitle">Number</span>
  <span class="colTitle">X</span>
  <span class="colTitle">Y</span>
  <span class="colTitle">Z</span>
  <span class="colTitle">Last</span>
  <form action="" id="formId">
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_1" class="colData">
    <input type="text" name="rowX_1" class="colData">
    <input type="text" name="rowY_1" class="colData">
    <input type="text" name="rowZ_1" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_2" class="colData">
    <input type="text" name="rowX_2" class="colData">
    <input type="text" name="rowY_2" class="colData">
    <input type="text" name="rowZ_2" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_3" class="colData lastRow">
    <input type="text" name="rowX_3" class="colData lastRow">
    <input type="text" name="rowY_3" class="colData lastRow">
    <input type="text" name="rowZ_3" class="colData lastRow">
    <input type="text" name="type_2" class="colData lastRow">
    <span class="colDataBorder"></span>
  </form>
</div>
<span class="addRow rowButton">+</span>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题