我有一个HTML表格，我可以在其中添加行，但我显示的列是我在添加新行时显示的不同，这是我的代码..
这是我在不添加行时显示的表格：
Image with the view of table (normal view)
这是我添加新行时的表格：
Image with the view of table adding a row
所以这是我的问题......
当我完成添加我的行时，我需要像我展示的第一张图片一样支持表格，我使用此代码：
$('#tablaServicios th:eq(6)').hide();
$('#tablaServicios th:eq(9)').hide();
$('#tablaServicios th:eq(10)').hide();
$('#tablaServicios th:eq(3)').show();
$('#tablaServicios th:eq(4)').show();
$('#tablaServicios th:eq(7)').show();
$('#tablaServicios th:eq(8)').show();
$('#tablaServicios td:nth-child(5)').show();
$('#tablaServicios td:nth-child(6)').show();
$('#tablaServicios td:nth-child(9)').show();
$('#tablaServicios td:nth-child(10)').show();
$('#tablaServicios td:nth-child(8)').hide();
$('#tablaServicios td:nth-child(11)').hide();
$('#tablaServicios td:nth-child(12)').hide();
它的所有行都适用于新行，所以我不知道我在做什么坏...这是我使用最后一个代码的函数：
$(document).on('click','.clsbtnGuardarServicio',function(){
var i = this.name.substring(18)
var nomServicio = $("#nombreServicio"+i).val();
var btn = $(this);
if(nomServicio.trim() == "")
{
alert("Debe ingresar un nombre de SERVICIO valido")
}
else
{
$.post("AccionesServicios.html", {
nomServicio:$("#nombreServicio"+i).val(),
descripcion:$("#descripcionServicio"+i).val(),
tipo:$("#tipoServicio"+i).val(),
orquestador:$("#servicioOrquestadorServicio"+i).val(),
timeout:$("#timeOutRespuestaServicio"+i).val(),
cargaAlta:$("#lvlCargaAlta"+i).val(),
cargaBaja:$("#lvlCargaBaja"+i).val(),
accion:"Agregar" }, function(mensaje) {
if(mensaje == "")
{
var val = $("#tipoServicio"+i).val();
$("#tipoServicio"+i).replaceWith('<input type="text" name="tipoServicio'+i+'" id="tipoServicio'+i+'" class="clsAnchoTotal" value="'+val+'" readonly="true" />');
btn.attr( {'id':'btnModificarServicio'+i,
'name':'btnModificarServicio'+i,
});
btn.val('');
btn.removeClass('clsbtnGuardarServicio').addClass('btnModificarServicio');
$("#nombreServicio"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#descripcionServicio"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#tipoServicio"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#servicioOrquestadorServicio"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#timeOutRespuestaServicio"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#lvlCargaAlta"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#lvlCargaBaja"+i).removeClass('NclsAnchoTotal').addClass('clsAnchoTotal');
$("#nombreServicio"+i).attr('readonly',true)
$("#descripcionServicio"+i).attr('readonly',true)
$("#tipoServicio"+i).attr('readonly',true)
$("#servicioOrquestadorServicio"+i).attr('readonly',true)
$("#timeOutRespuestaServicio"+i).attr('readonly',true)
$("#lvlCargaAlta"+i).attr('readonly',true)
$("#lvlCargaBaja"+i).attr('readonly',true)
$('#tablaServicios th:eq(6)').hide();
$('#tablaServicios th:eq(9)').hide();
$('#tablaServicios th:eq(10)').hide();
$('#tablaServicios th:eq(3)').show();
$('#tablaServicios th:eq(4)').show();
$('#tablaServicios th:eq(7)').show();
$('#tablaServicios th:eq(8)').show();
$('#tablaServicios td:nth-child(5)').show();
$('#tablaServicios td:nth-child(6)').show();
$('#tablaServicios td:nth-child(9)').show();
$('#tablaServicios td:nth-child(10)').show();
$('#tablaServicios td:nth-child(8)').hide();
$('#tablaServicios td:nth-child(11)').hide();
$('#tablaServicios td:nth-child(12)').hide();
}else if( mensaje == "Existente")
{
alert("Servicio ya existe!")
}else
{
alert(mensaje)
}
} );
}
})
HTML TABLE：
<table align="center" width="10%" id="tablaServicios">
<thead>
<th>Servicio</th>
<th>Descripcion</th>
<th>Tipo Servicio</th>
<th>Versión Ejecución</th>
<th>Cuenta de Host</th>
<th>Servicio Orquestador</th>
<th>Timeout de respuesta</th>
<th>Cantidad de Instancias</th>
<th>Estado</th>
<th>Nivel de carga alta</th>
<th>Nivel de carga baja</th>
</thead>
<tbody>
<xsl:for-each select="/Datos/servicio">
<tr>
<input type="hidden" id="idServicio{position()-1}"
value="{id}" name="idServicio{position()-1}" />
<td>
<input type="text" id="nombreServicio{position()-1}" name="nombreServicio{position()-1}"
readonly="true" value="{nombreServicio}" class="clsAnchoTotal" style="width:100px"/>
</td>
<td>
<input type="text" id="descripcionServicio{position()-1}"
name="descripcionServicio{position()-1}" readonly="true"
value="{descripcion}" class="clsAnchoTotal" style="width:300px"/>
</td>
<td>
<input type="text" id="tipoServicio{position()-1}"
name="tipoServicio{position()-1}" readonly="true"
value="{tipoServicio}" class="clsAnchoTotal" style="width:120px" />
</td>
<td>
<input type="text" id="versionEjecucionServicio{position()-1}"
name="versionEjecucionServicio{position()-1}"
readonly="true" value="{version}" class="clsAnchoTotal" style="width:100px" />
</td>
<td>
<input type="text" id="CuentaHostServicio{position()-1}"
name="CuentaHostServicio{position()-1}" readonly="true"
value="{cuentaHost}" class="clsAnchoTotal" />
</td>
<td>
<input type="text" id="ServicioOrquestadorServicio{position()-1}"
name="ServicioOrquestadorServicio{position()-1}" readonly="true"
value="{servicioOrquestador}" class="clsAnchoTotal" />
</td>
<td>
<input type="text" id="timeOutRespuestaServicio{position()-1}"
name="timeOutRespuestaServicio{position()-1}" readonly="true"
value="{timeOut}" class="clsAnchoTotal" />
</td>
<td>
<input type="text" id="cantidadInstanciasServicios{position()-1}"
name="cantidadInstanciasServicios{position()-1}" readonly="true"
value="{cantidadInstancias}" class="clsAnchoTotal" style="width:80px" />
</td>
<td>
<input type="text" id="estadoServicio{position()-1}"
name="estadoServicio{position()-1}" readonly="true"
value="{estado}" class="clsAnchoTotal" />
</td>
<td>
<input type="text" id="lvlCargaAlta{position()-1}"
name="lvlCargaAlta{position()-1}" readonly="true"
value="{cargaAlta}" class="clsAnchoTotal" /> TPS por instancia durante <input type="text" id="TPSAlta{position()-1}"
name="TPSAlta{position()-1}" readonly="true"
value="{TPSAlta}" class="clsAnchoTotal" /> Segundos
</td>
<td>
<input type="text" id="lvlCargaBaja{position()-1}"
name="lvlCargaBaja{position()-1}" readonly="true"
value="{cargaBaja}" class="clsAnchoTotal" /> TPS por instancia durante <input type="text" id="TPSBaja{position()-1}"
name="TPSBaja{position()-1}" readonly="true"
value="{TPSBaja}" class="clsAnchoTotal" /> Segundos
</td>
<td align="right">
<input type="button" value=""
id="btnBorrarServicio{position()-1}" name="btnBorrarServicio{position()-1}"
class="clsEliminarFilaServicio" />
</td>
<td>
<input type="button" value=""
id="btnModificarServicio{position()-1}" name="btnModificarServicio{position()-1}"
class="btnModificarServicio" />
</td>
</tr>
</xsl:for-each>
</tbody>
<tfoot>
<tr>
<td colspan="8" align="right">
<input type="button" value="Agregar nuevo servicio" name="btnAgregarUsuario" id="btnAgregarServicio"
class="clsAgregarFilaServicio"/>
</td>
</tr>
</tfoot>
</table>
所以我希望你们可以帮助我们，感谢先生，对不起我的坏英语