【发布时间】：2017-06-01 00:54:48
【问题描述】：
首先我为冗长的解释道歉。 我知道这种问题已经回答了很多次了，我也浏览过其他一些帖子，但没有一种方法适合我。
有些地方我遗漏了一些东西，我无法修复这部分。 如果有人能指出到底出了什么问题，那将有很大帮助。
基本上我已经按照这个链接开始动态添加和删除文本区域：-
https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
但是我已经按照我的要求修改了代码。 我附上了 3 张图片来展示我在做什么
Click on this link to see the attached image this is by Default textarea
On clicking +(plus) button i added new textarea,This is where textarea starts moving
我尝试改变位置和溢出，但似乎没有任何效果
好的，我正在尝试修复这部分代码，其中我有一个默认 textarea 并且用户可以动态添加和删除，但是每当我尝试添加新 textarea 时，所有以前的 textarea 位置都会向上移动并超出该属性的范围
<td id="ui-selected-xpath">
<div class="input_fields_wrap">
<img class="add_field_button" src='images/new.png' width='16' height='16'/>
<div class="ui-xpathDiv-forTextArea">
<textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]">
</div>
</div>
</td>
现在当我动态添加 textarea 时，它超出了 td 区域
我的 HTML 代码：-
<body>
<div id='adding-app' title='Add New Xpath'>
<div id='editor-app'></div>
<div align='center'>
<form>
<fieldset>
<div id='tue' title='Add Xpath'>
<div id='editor-xpath'></div>
<div align='center'>
<table>
<tr>
<td>
<label for='app_name0'><b>Xpath Request :
</b></label>
<p id="demo"></p>
</td>
</tr>
<tr>
<td>
<textarea id='Xpath' readonly></textarea>
</td>
<td id="ui-selected-xpath">
<div class="input_fields_wrap">
<img class="add_field_button" src='images/new.png' width='16' height='16'/>
<div class="ui-xpathDiv">
<textarea id="xpathGrade" class="ui-xpath" type="text" name="mytext[]">
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</body>
这是我的 CSS 代码：
#Xpath{
width: 351px;
height: 349px;
}
#ui-selected-xpath{
border: 1px solid black;
}
.add_field_button{
position: relative;
float:left;
bottom:110px;
left:266px;
}
.ui-xpath{
position: relative;
float:left;
bottom:135px;
resize: none;
height: 2em;
width: 20em;
}
.ui-xpathDiv{
margin-bottom: 16px;
background-color: red;
max-width: 100%;
max-height: 100%;
}
#xpathGrade{
margin-bottom: 16px;
resize: none;
height: 2em;
width: 20em;
}
.ui-xpath{
position: relative;
float:left;
bottom:135px;
resize: none;
height: 2em;
width: 20em;
}
用于添加和删除文本区域的我的 JS 代码
$(".add_field_button").click(function(e){ //on add input button click
isFirstElementFocused =false;
x++; //text box increment
$(".input_fields_wrap").append(
'<div class="ui-xpathDiv" id="xpathDiv_'+x+'"><textarea id="xpathGrade_'+x+'" type="text" class="ui-xpath" name="mytext[]" /><img class="remove_field" src="images/remove.png"/></div>'
);
});
$(".input_fields_wrap").on("click",".remove_field",
function(e){ //user click on remove text
e.preventDefault();
checkDuplicateXpath.remove($(this).prev().val());
x--;
$(this).closest("div").remove();
$(".ui-xpathDiv").each(function () {
x = Number(this.id.substring(this.id.indexOf("_") + 1));
});
});
我正在寻找的是使动态文本区域固定，以便每当添加任何文本区域时它都不应该移动并且它应该附加在底部
【问题讨论】：
标签： jquery html css position css-position