Syf AK Ответов: 1

Как добавить строку таблицы и столбцы в определенный индекс

Как добавить строку таблицы или столбец таблицы в определенный индекс, щелкнув по ячейкам таблицы, как и лист excel.

Что я уже пробовал:

<table >
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>


скрипт для добавления строки:

function AppendRows() {
        var tableRows = document.getElementById('myTable'),
            row = tableRows.insertRow(tableRows.rows.length);
        row.height = '50';
        for (var i = 0; i < tableRows.rows[0].cells.length; i++) {
            row.insertCell(i), i, 'row';
        }
    }

1 Ответов

Рейтинг:
12

Mohibur Rashid

Я написал это специально для тебя!

<HTML>
<STYLE>
.space {
	background:url('data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY5h58xUABGsCXQMuL3UAAAAASUVORK5CYII=');
	height:5px;
	cursor: pointer;
}
</STYLE>
<SCRIPT>
function onrow_click(t) {
	var currentRowIndex = t.rowIndex;
	if(currentRowIndex % 2 != 0) {
		return;
	}
	var pickIndex;
	if(t.parentElement.rows.length == t.rowIndex + 1) {
		pickIndex = currentRowIndex - 1;
	} else {
		pickIndex = currentRowIndex + 1;
	}

	var col_count = t.parentElement.rows[pickIndex].cells.length; //
	var newRow = t.parentElement.insertRow(currentRowIndex + 1);
	for(var i=0;i<col_count;i++) {
		var newCol = newRow.insertCell();
		newCol.innerHTML="Bold";
		
	}
	var newEmptyRow = t.parentElement.insertRow(currentRowIndex + 2);;
	var newEmptyCol = newEmptyRow.insertCell();
	newEmptyCol.colSpan = col_count;
	newEmptyCol.className = "space";
	newEmptyCol.onclick = onclick="onrow_click(this)";
}
</SCRIPT>
<BODY>
	<TABLE id='dd' border=1 cellpadding=0 cellspacing=0>
		<TR class="space" onclick="onrow_click(this)">
			<TD colspan=3></TD>
		</TR>
		<TR>
			<TD>TEST 1</TD>
			<TD>TEST 2</TD>
			<TD>TEST 3</TD>
		</TR>
		<TR class="space"  onclick="onrow_click(this)">
			<TD colspan=3></TD>
		</TR>
		<TR>
			<TD>TEST 4</TD>
			<TD>TEST 5</TD>
			<TD>TEST 6</TD>
		</TR>
		<TR class="space" onclick="onrow_click(this)">
			<TD colspan=3></TD>
		</TR>
	</TABLE>
</BODY>
</HTML>