método insertRow()
Definición y uso
El método insertRow() se utiliza para insertar una nueva fila en la posición especificada de la tabla.
gramática
tableObject.insertRow(índice)
valor de retorno
Devuelve un TableRow que representa la fila recién insertada.
ilustrar
Este método crea un nuevo objeto TableRow que representa una nueva etiqueta <tr> y la inserta en la tabla en la posición especificada.
La nueva fila se insertará antes de la fila del índice. Si el índice es igual al número de filas de la tabla, la nueva fila se agregará al final de la tabla.
Si la tabla está vacía, la nueva fila se insertará en una nueva sección <tbody>, que a su vez se insertará en la tabla.
Tirar
Si el índice del parámetro es menor que 0 o mayor o igual que el número de filas de la tabla, este método generará una excepción DOMException con el código INDEX_SIZE_ERR.
ejemplo
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<tipo de script="texto/javascript">
función insRow()
{
document.getElementById('miTabla').insertRow(0)
}
</script>
</cabeza>
<cuerpo>
<table id="miTabla">
<tr>
<td>Fila1 celda1</td>
<td>Fila1 celda2</td>
</tr>
<tr>
<td>Fila2 celda1</td>
<td>Fila2 celda2</td>
</tr>
</tabla>
<br />
<tipo de entrada="botón" onclick="insRow()"
valor="Insertar nueva fila">
</cuerpo>
</html>
eliminarCélula()
Definición y uso
El método deleteCell() se utiliza para eliminar una celda (elemento <td>) en una fila de la tabla.
gramática
tablerowObject.deleteCell(índice)
ilustrar
El índice del parámetro es la posición en la fila del elemento de la tabla que se va a eliminar.
Este método eliminará el elemento de la tabla en la posición especificada en la fila de la tabla.
Tirar
Si el índice del parámetro es menor que 0 o mayor o igual que el número de elementos de la tabla en la fila, este método generará una excepción DOMException con el código INDEX_SIZE_ERR.
ejemplo
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<tipo de script="texto/javascript">
funcióndelRow()
{
document.getElementById('miTabla').deleteRow(0)
}
</script>
</cabeza>
<cuerpo>
<table id="miTabla">
<tr>
<td>Fila1 celda1</td>
<td>Fila1 celda2</td>
</tr>
<tr>
<td>Fila2 celda1</td>
<td>Fila2 celda2</td>
</tr>
</tabla>
<br />
<tipo de entrada="botón" onclick="delRow()"
valor="Eliminar primera fila">
</cuerpo>
</html>
insertarCelda()
Definición y uso
El método insertCell() se utiliza para insertar un elemento <td> vacío en una posición especificada en una fila de una tabla HTML.
gramática
tablerowObject.insertCell(índice)
valor de retorno
Un objeto TableCell que representa un elemento <td> recién creado e insertado.
ilustrar
Este método crea un nuevo elemento <td> y lo inserta en la fila en la posición especificada. La nueva celda se insertará antes de la celda ubicada actualmente en la posición especificada por el índice. Si el índice es igual al número de celdas de la fila, la nueva celda se agrega al final de la fila.
Tenga en cuenta que este método solo puede insertar elementos de la tabla de datos <td>. Si necesita agregar un elemento de encabezado a una fila, debe crear e insertar un elemento <th> usando el método Document.createElement() y el método Node.insertBefore() (o métodos relacionados).
Tirar
Si el índice del parámetro es menor que 0 o mayor o igual que el número de elementos de la tabla en la fila, este método generará una excepción DOMException con el código INDEX_SIZE_ERR.
ejemplo
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<tipo de script="texto/javascript">
función insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="Juan"
}
</script>
</cabeza>
<cuerpo>
<tabla>
<tr id="tr1">
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr id="tr2">
<td>Pedro</td>
<td>Grifo</td>
</tr>
</tabla>
<br />
<tipo de entrada="botón" onclick="insCell()" valor="Insertar celda">
</cuerpo>
</html>
eliminarCélula()
Definición y uso
El método deleteCell() se utiliza para eliminar una celda (elemento <td>) en una fila de la tabla.
gramática
tablerowObject.deleteCell(índice)
ilustrar
El índice del parámetro es la posición en la fila del elemento de la tabla que se va a eliminar.
Este método eliminará el elemento de la tabla en la posición especificada en la fila de la tabla.
Tirar
Si el índice del parámetro es menor que 0 o mayor o igual que el número de elementos de la tabla en la fila, este método generará una excepción DOMException con el código INDEX_SIZE_ERR.
ejemplo
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<tipo de script="texto/javascript">
funcióndelCell()
{
documento.getElementById('tr2').deleteCell(0)
}
</script>
</cabeza>
<cuerpo>
<tabla>
<tr id="tr1">
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr id="tr2">
<td>Pedro</td>
<td>Grifo</td>
</tr>
</tabla>
<br />
<tipo de entrada="botón" onclick="delCell()" valor="Eliminar celda">
</cuerpo>
</html>
Aplicaciones en el proyecto:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
vartrIndex = 0;
//Añadir filas dinámicamente
función appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var nombre de clase;
si(nulo!=sel){
for(var i = 0; i < sel.options.length; i++){
si(sel.opciones[i].seleccionado)
nombredeclase=sel.opciones[i].valor;
}
}
//Los datos provienen de ajax, formato json.
convert.getConvertBean2Json(nombredeclase,
función (resultado) {
var obj = eval('('+resultado+')');
var tabla = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<tipo de entrada='botón' valor='Eliminar' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<tipo de entrada='texto' nombre='convertList["+trIndex+"].id'><tipo de entrada='hidden' nombre='convertList["+trIndex+"].nombre ' valor='"+obj.nombre+"'>";
si(nulo!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
cadenaparam = cadenaparam+
"Nombre del parámetro:"+obj.paramList[i].nombre+
";Tipo de parámetro:"+obj.paramList[i].tipo+
"; Valor del parámetro: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<tipo de entrada='hidden' nombre='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<tipo de entrada='hidden' nombre='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trÍndice++;
});
}
//eliminar fila
en eliminarRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>