Hay varias filas en la tabla: var trcnt = table.rows.length; (La tabla es ID)
Cuántas columnas hay para cada fila: para (var i = 0; i <trcnt; i ++)
table.rows [i] .cells.length;
Tabla de operación de JavaScript:
InserTrow (), DelTerow (), Métodos Insert Cell (), DeleteCell ()
table.insertrow () está bien bajo IE, pero en Firefox, debe cambiarse a Table.inSerTrow (-1)
Del mismo modo, el InsertCell () correspondiente también debe cambiarse a Insert Cell (-1)
Método InserTrow ()
Definición y uso
El método InserTrow () se usa para insertar una nueva fila en una posición especificada en la tabla.
gramática
tableObject.inserTrow (índice)
Valor de retorno
Devuelve un Tablerow, que indica la fila recién insertada.
ilustrar
Este método crea un nuevo objeto Tablerow, representa una nueva etiqueta <tr> y la inserta en la posición especificada en la tabla.
La nueva línea se insertará antes de la línea de índice. Si el índice es igual al número de filas en la tabla, la nueva fila se agregará al final de la tabla.
Si la tabla está vacía, la nueva fila se insertará en un nuevo segmento <tbody>, que se insertará en la tabla.
Tirar
Si el índice de parámetros es inferior a 0 o mayor o igual o igual al número de filas en la tabla, este método lanzará una excepción de DomException con el código index_size_err.
ejemplo
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
function InsRow ()
{
document.getElementById ('mytable'). INSERTROW (0)
}
</script>
</ablo>
<Body>
<table id = "mytable">
<tr>
<TD> Row1 Cell1 </td>
<TD> ROW1 CELL2 </td>
</tr>
<tr>
<TD> ROW2 Cell1 </td>
<TD> ROW2 Cell2 </td>
</tr>
</table>
<Br />
<input type = "button" onClick = "insrow ()"
valor = "insertar nueva fila">
</body>
< /html>
deletecell ()
Definición y uso
El método DeleteCell () se usa para eliminar las células (elementos <td>) en una fila de tabla.
gramática
TablerowObject.deletecell (índice)
ilustrar
El índice de parámetros es la posición del elemento de tabla que se eliminará en la fila.
Este método elimina los elementos de la tabla en la posición especificada en la fila de tabla.
Tirar
Si el índice de parámetros es inferior a 0 o mayor o igual al elemento de tabla en la fila, este método lanzará una excepción de DomException con el código index_size_err.
ejemplo
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
función delrow ()
{
document.getElementById ('mytable'). Deleterow (0)
}
</script>
</ablo>
<Body>
<table id = "mytable">
<tr>
<TD> Row1 Cell1 </td>
<TD> ROW1 CELL2 </td>
</tr>
<tr>
<TD> ROW2 Cell1 </td>
<TD> ROW2 Cell2 </td>
</tr>
</table>
<Br />
<input type = "button" onClick = "delrow ()"
valor = "eliminar la primera fila">
</body>
< /html>
insertcell ()
Definición y uso
El método InsertCell () se usa para insertar un elemento <td> vacío en la posición especificada de una fila en la tabla HTML.
gramática
TablerowObject.insertcell (índice)
Valor de retorno
Un objeto de tablón que representa un elemento <td> recién creado e insertado.
ilustrar
Este método creará un nuevo elemento <td> e lo insertará en la posición especificada en la fila. La nueva celda se insertará antes del elemento de tabla actualmente ubicado en la posición especificada en el índice. Si el índice es igual al número de celdas en la fila, la nueva celda se agrega al final de la fila.
Tenga en cuenta que este método solo puede insertar elementos de tabla de datos <TD>. Si necesita agregar elementos 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 de parámetros es inferior a 0 o mayor o igual al elemento de tabla en la fila, este método lanzará una excepción de DomException con el código index_size_err.
ejemplo
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
función inscell ()
{
var x = document.getElementById ('TR2'). Insert Cell (0)
x.innerhtml = "John"
}
</script>
</ablo>
<Body>
<Table>
<tr id = "tr1">
<th> FirstName </th>
<th> lastname </th>
</tr>
<tr id = "tr2">
<TD> Peter </td>
<TD> Griffin </td>
</tr>
</table>
<Br />
<input type = "button" onClick = "inscell ()" valor = "insertar celda">
</body>
< /html>
deletecell ()
Definición y uso
El método DeleteCell () se usa para eliminar las células (elementos <td>) en una fila de tabla.
gramática
TablerowObject.deletecell (índice)
ilustrar
El índice de parámetros es la posición del elemento de tabla que se eliminará en la fila.
Este método elimina los elementos de la tabla en la posición especificada en la fila de tabla.
Tirar
Si el índice de parámetros es inferior a 0 o mayor o igual al elemento de tabla en la fila, este método lanzará una excepción de DomException con el código index_size_err.
ejemplo
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript">
función delcell ()
{
document.getElementById ('TR2'). DeleteCell (0)
}
</script>
</ablo>
<Body>
<Table>
<tr id = "tr1">
<th> FirstName </th>
<th> lastname </th>
</tr>
<tr id = "tr2">
<TD> Peter </td>
<TD> Griffin </td>
</tr>
</table>
<Br />
<input type = "button" onClick = "delcell ()" value = "Eliminar celda">
</body>
< /html>
Aplicaciones en el proyecto:
La copia del código es la siguiente:
<script type = "text/javaScript">
var trindex = 0;
// aumenta dinámicamente la fila
Uncción appendConvert () {
// var sel = document.getElementById ("SelectConvertName");
var sel = document.getElementsByName ("SelectConvertName") [0];
var className;
if (null! = sel) {
para (var i = 0; i <sel.options.length; i ++) {
if (sel.options [i] .selected)
classname = sel.options [i] .Value;
}
}
// Los datos provienen de AJAX, formulario JSON.
convert.getConvertBean2Json (classname,
función (resultado) {
var obj = eval ('('+resultado+')');
var tabla = document.getElementById ("ConvertTable");
var newRow = TABLE.INSERTROW (Trindex+1);
newRow.insertCell (0) .innerhtml = obj.name+"<input type = 'button' value = 'delete' onClick = 'deleterow (this)'>";
newRow.insertCell (1) .innerhtml = "<input type = 'text' name = 'convertIst ["+trindex+"]. id'> <input type = 'hidden' name = 'convertirlist ["+trindex+"]. name' value = '"+obj.name+"'>";
if (null! = obj.paramlist) {
var paramstr = "";
para (var i = 0; i <obj.paramlist.length; i ++) {
paramstr = paramstr+
"Nombre del parámetro:"+obj.paramlist [i] .name+
"; Tipo de parámetro:"+obj.paramlist [i] .type+
"; Valor del parámetro: <input name = 'convertList ["+trindex+"]. ParamList ["+i+"]. Valor' type = 'text'> <br>"+
"<input type = 'hidden' name = 'convertList ["+trindex+"]. paramList ["+i+"]. name' value = '"+obj.paramlist [i] .name+"'>"+
"<input type = 'hidden' name = 'convertIst ["+trindex+"]. paramlist ["+i+"]. type' value = '"+obj.paramlist [i] .type+"'>";
}
newrow.insertcell (2) .innerhtml = paramstr;
}
Trindex ++;
});
}
// Eliminar la línea
en deleterow (r) {
var i = r.parentnode.parentnode.rowindex;
document.getElementById ('ConvertTable'). Deleterow (i);
Trindex--;
}
</script>