<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script language="javascript" >
$(document).ready(function() {
$('img.deleterow').live('click', function() {
$(this).parent().parent().remove();
});
$('img.deletecolumn').live('click', function() {
var colIndex = $(this).closest("td").prevAll("td").length;
$(this).parents("table").find("tr").each(function(){
$(this).find("td:eq("+colIndex+")").remove();
});
});
})
</script>
</head>
<body>
Изначально таблица загружается динамически, матрица каждой ячейки будет правильной в соответствии с последовательностью.
Example,
start from first row first cell is input id/name= 0_0, 0_1, 0_2....
start from second row first cell is input id/name= 1_0, 1_1, 1_2....
Когда я нажимаю кнопку «Сохранить» для публикации на стороне сервера, все ячейкиЗначение должно быть в последовательности, так что я могу получить его через последовательность циклов.
Проблема теперь в том, что когда я использую функцию удаления строки и удаления столбца, она испортит ввод id = "0_1" name = "0_1 "создан изначально Идентификатор / имя больше не будет следовать числовой последовательности, он будет иметь скачкообразный номер.
Есть ли способ восстановить последовательность матрицы и переназначить ее, чтобы переопределить атрибут идентификатора и имени для вводаполе, пока остается существующее значение внутри него?
<table border="1">
<tbody>
<tr>
<td>
<input type="text" name="caption" placeholder="Eg: Some text"></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td> </td>
</tr>
<tr>
<td>Head 1<input type="hidden" name="rowvalue" value="Head 1"></td>
<td><input id="0_0" type="text" name="0_0" value="row 0 col 0"></td>
<td><input id="0_1" type="text" name="0_1" value="row 0 col 1"></td>
<td><input id="0_2" type="text" name="0_2" value="row 0 col 2"></td>
<td><input id="0_3" type="text" name="0_3" value="row 0 col 3"></td>
<td><input id="0_4" type="text" name="0_4" value="row 0 col 4"></td>
<td><input id="0_5" type="text" name="0_5" value="row 0 col 5"></td>
<td><img class="deleterow" src="minus.png"></td>
</tr>
<tr>
<td>Head 2<input type="hidden" name="rowvalue" value="Head 2"></td>
<td><input id="1_0" type="text" name="1_0" value="row 1 col 0"></td>
<td><input id="1_1" type="text" name="1_1" value="row 1 col 1"></td>
<td><input id="1_2" type="text" name="1_2" value="row 1 col 2"></td>
<td><input id="1_3" type="text" name="1_3" value="row 1 col 3"></td>
<td><input id="1_4" type="text" name="1_4" value="row 1 col 4"></td>
<td><input id="1_5" type="text" name="1_5" value="row 1 col 5"></td>
<td><img class="deleterow" src="minus.png"></td>
</tr>
<tr>
<td>Head 3<input type="hidden" name="rowvalue" value="Head 3"></td>
<td><input id="2_0" type="text" name="2_0" value="row 2 col 0"></td>
<td><input id="2_1" type="text" name="2_1" value="row 2 col 1"></td>
<td><input id="2_2" type="text" name="2_2" value="row 2 col 2"></td>
<td><input id="2_3" type="text" name="2_3" value="row 2 col 3"></td>
<td><input id="2_4" type="text" name="2_4" value="row 2 col 4"></td>
<td><input id="2_5" type="text" name="2_5" value="row 2 col 5"></td>
<td><img class="deleterow" src="minus.png"></td>
</tr>
<tr>
<td>Head 4<input type="hidden" name="rowvalue" value="Head 4"></td>
<td><input id="3_0" type="text" name="3_0" value="row 3 col 0"></td>
<td><input id="3_1" type="text" name="3_1" value="row 3 col 1"></td>
<td><input id="3_2" type="text" name="3_2" value="row 3 col 2"></td>
<td><input id="3_3" type="text" name="3_3" value="row 3 col 3"></td>
<td><input id="3_4" type="text" name="3_4" value="row 3 col 4"></td>
<td><input id="3_5" type="text" name="3_5" value="row 3 col 5"></td>
<td><img class="deleterow" src="minus.png"></td>
</tr>
<tr>
<td> </td>
<td><img class="deletecolumn" src="minus.png"></td>
<td><img class="deletecolumn" src="minus.png"></td>
<td><img class="deletecolumn" src="minus.png"></td>
<td><img class="deletecolumn" src="minus.png"></td>
<td><img class="deletecolumn" src="minus.png"></td>
<td><img class="deletecolumn" src="minus.png"></td>
<td> </td>
</tr>
</tbody>
</table>
</body>