1
부트 스트랩의 모달로 모든 텍스트 필드 (tr)를 편집 할 수 있습니까? 새로운 필드를 만들 수 있습니다. 어떤 친구는이 경우에 사용할 수 있다고 말했지만, 이전에는이 프레임 워크로 작업하지 않았습니다. 나는 약간의 연구를했고, 여기에 그리고 인터넷에 게시 된 몇몇 코드를 시도했으나 일하지 않았다. 이것이 어려운 일이 아니며 여러분이 도와 주시면 감사하겠습니다. 나는 자기 학습을위한 미니 프로젝트를 만들고, 분명히 학교에서 큰 프로젝트로 시작한 후에.이 경우 부트 스트랩을 사용할 수 있습니까?
코드 : HTML
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/script1.js"></script>
</head>
<body>
<table id="mainTable" name="mainTable" align="center" border="0" width="auto">
<tbody>
<tr>
<td align="center">
<input type="number" id="regsAmount" name="regsAmount" style="width:40px; text-align: center;">
<input type="button" id="submitAmount" name="submitAmount" style="width:auto;" value="Add">
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Last Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">ID</th>
<th style="text-align:center; border-style:solid; width:250px; border-width:2px;">Mail</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Username</th>
</td>
</tr>
<tr align="center">
<td>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><button type="button" data-id="1" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><button type="button" data-id="2" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td><button type="button" data-id="3" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td><button type="button" data-id="4" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td><button type="button" data-id="5" class="btn btn-default editButton">Edit</button></td>
</tr>
</tbody>
</table>
<p align="center"><input type="button" id="saveRegs" name="saveRegs" value="Save All" style="width:auto;" onclick="disable_inp()"></p>
</body>
</html>
JS :
function disable_inp()
{
$("tr:gt(0) td:has(input)").text(function()
{
return $('input', this).val();
});
}
$(document).ready(function()
{
$(document).on('click', "#submitAmount", function()
{
var ValReg = $("#regsAmount").val();
var i = 1;
var array = new Array(5)
array = ["<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>"];
while (i <= ValReg)
{
$("#mainTable").last().append("<tr></tr>");
$("tr").last().append('<td> </td>' + '<td align="center">' + array[0] + '</td>' + '<td align="center">' + array[1] + '</td>' + '<td align="center">' + array[2] + '</td>' + '<td align="center">' + array[3] + '</td>' + '<td align="center">' + array[4] + '</td>');
i++;
}
})
});
무엇이 효과가 없었습니까? 콘솔에 오류가 있습니까? 당신이 그 때 그것을 체크하지 않은 경우에 시작하는 당신의 첫번째 장소이어야한다. 그런 다음 중단 점을 설정하고 변수를 검사하여 디버깅에 대해 알아야합니다. – scrappedcola
[this one] (http://formvalidation.io/examples/loading-saving-data-modal/)과 같은 사례는 저에게 효과적이지 않았습니다. 그리고 그것은 큰 것입니다, 나는 다소 멍청한 @ frameworks를 사용합니다. – xblade52
하지만 "작동하지 않는"의미를 정의해야합니다. 모달 표시, 제출 이벤트 발생, 추가 할 요소를 선택하는 데 문제가 있습니까? 적절한 요소를 선택 했습니까? 추가하지 않았습니까? 런 타임 오류가 실행되는 것을 방해하고 있습니까? 이들은 질문을 게시하기 전에 취해야 할 기본 디버깅 단계입니다. 누군가에게 당신의 작품을 밀어 넣고 "나는 멍청한 행동이다. 고쳐 먹지 않는다"는 말은 당신이 더 나은 개발자가되는 것을 돕지 않는다. 당신이 적절한 질문을하면 나는 당신의 경험 수준을 덜 걱정할 수 있습니다. – scrappedcola