Удалить столбец

Question

У меня есть таблица, и я хочу удалить столбец таблицы. Я написал код для удаления определенного столбца.

function deleteColumn(index) {
  var total_row = document.getElementById("testBenchTable").rows;
  for (var i=0; i<total_row.length; i++) {
    if (total_row[i].cells.length > 1) {
        total_row[i].deleteCell(index);
    }
  }

Теперь, что нужно сделать, чтобы я мог выбрать конкретный столбец (заголовок) и нажать кнопку удаления, чтобы этот конкретный столбец был удален?

Answer 1

Чтобы удалить определенный столбец, вы можете использовать cellIndex элемента (см .: TableData Свойство cellIndex )

function deleteColumn(element) {
	var idx = element.cellIndex;
  var total_row = document.getElementById("testBenchTable").rows;
  for (var i=0; i<total_row.length; i++) {
    if (total_row[i].cells.length > 1) {
        total_row[i].deleteCell(idx);
    }
  }
}

<table id="testBenchTable">
  <tr>
    <th onclick="deleteColumn(this)">Month</th>
    <th onclick="deleteColumn(this)">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Answer 2

function deleteColumn(event) {

var index = event.target.cellIndex;
  var total_row = document.getElementById("testBenchTable").rows;
  for (var i=0; i<total_row.length; i++) {
    if (total_row[i].cells.length > 1) {
        total_row[i].deleteCell(index);
    }
  }
}

<table style="width:100%" id="testBenchTable">
  <tr>
    <th onclick="deleteColumn(event)">Firstname</th>
    <th onclick="deleteColumn(event)">Lastname</th> 
    <th onclick="deleteColumn(event)">Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 3

Вы можете обратиться по этой ссылке для удаления столбца http://www.mredkj.com/tutorials/tableaddcolumn.html

function deleteColumn(tblId)
{
    var allRows = document.getElementById(tblId).rows;
    for (var i=0; i<allRows.length; i++) {
        if (allRows[i].cells.length > 1) {
            allRows[i].deleteCell(-1);
        }
    }
}

// 2006-08-21 - Created
// 2006-11-05 - Modified - head and body
function addColumn(tblId)
{
	var tblHeadObj = document.getElementById(tblId).tHead;
	for (var h=0; h<tblHeadObj.rows.length; h++) {
		var newTH = document.createElement('th');
		tblHeadObj.rows[h].appendChild(newTH);
		newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1)
	}

	var tblBodyObj = document.getElementById(tblId).tBodies[0];
	for (var i=0; i<tblBodyObj.rows.length; i++) {
		var newCell = tblBodyObj.rows[i].insertCell(-1);
		newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1)
	}
}
function deleteColumn(tblId)
{
	var allRows = document.getElementById(tblId).rows;
	for (var i=0; i<allRows.length; i++) {
		if (allRows[i].cells.length > 1) {
			allRows[i].deleteCell(-1);
		}
	}
}

<form>
<p>
<input type="button" value="add column" onclick="addColumn('tblSample')" />
<input type="button" value="delete column" onclick="deleteColumn('tblSample')" />
</p>
<table id="tblSample" border="1">
<thead>
<tr>
  <th>[th] row:0, cell: 0</th>
  <th>[th] row:0, cell: 1</th>
  <th>[th] row:0, cell: 2</th>
</tr>
</thead>
<tbody>
<tr>
  <td>[td] row:0, cell: 0</td>
  <td>[td] row:0, cell: 1</td>
  <td>[td] row:0, cell: 2</td>
</tr>
<tr>
  <td>[td] row:1, cell: 0</td>
  <td>[td] row:1, cell: 1</td>
  <td>[td] row:1, cell: 2</td>
</tr>
<tr>
  <td>[td] row:2, cell: 0</td>
  <td>[td] row:2, cell: 1</td>
  <td>[td] row:2, cell: 2</td>
</tr>
</tbody>
</table>
</form>