`

表格中插入一行

 
阅读更多
<HTML> 
<TITLE>Form Object example</TITLE> 
<HEAD> 
<script language="javascript"> 
function delrow1() 
{ 
var oElement=event.srcElement; 
while(oElement.tagName!="TR") 
{ 
oElement=oElement.parentElement; 
} 
var oTBody=oElement.parentElement; 
oTBody.removeChild(oElement) 
}



function delrow2()//删除当前行 
{ 
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; 
document.all.yltable.deleteRow(currRowIndex);//table10--表格id 
} 
function insertrow1() //增加的一行方法1 
{ 
var newnode = document.getElementById('yltable').lastChild.cloneNode(true); 
document.getElementById('yltable').appendChild(newnode); 
}

function insertrow2() //增加的一行方法2 
{ 
newRow=document.all.yltable.insertRow(-1); 
var j_1 = document.all.yltable.rows.length; 
newcell=newRow.insertCell(); 
newRow.bgColor='#FFFFFF'; 
newcell.align='center'; 
newcell.innerHTML=""+j_1+"";


newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center'; 
newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";


newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

function inserttable() 
{ 
var newnode = document.getElementById('yltable').cloneNode(true); 
document.getElementById('ylform').appendChild(newnode); 
} 
</script> 
</HEAD> 
<BODY> 
<form name="ylform" id="ylform"> 
<center> 
<input name="button" type="button" onClick="inserttable()" value="增加表格"> 
<input name="button2" type="button" onClick="insertrow1()" value="增加一行1"> 

<input name="button22" type="button" onClick="insertrow2()" value="增加一行2"> 
</center>


<div style="overflow-y:auto; overflow-x:visible;width:85%;height:150px">
<table border="1" align="center" width="50%" id="yltable"> 
<TBODY id=yl1> 
<tr> 
<td width="30%" height="22"><div align="center">1</div></td> 
<td width="40%"> 
<div align="center"> 
<input name="textfield" type="text" value="yl"> 
</div></td> 
<td width="30%"><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl2> 
<tr> 
<td><div align="center">2</div></td> 
<td><div align="center"> 
<input name="textfield2" type="text" value="yanleigis"> 
</div></td> 
<td><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl3> 
<tr> 
<td ><div align="center">3</div></td> 
<td ><div align="center"> 
<input name="textfield22" type="text" value="Landgis@126.com"> 
</div></td> 
<td ><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
</table> 
</div>


<center> 
</center> 
</form> 
</BODY> 
</HTML>

<table width=450 align=center>
<tr align=center><td align=center >
      <table id="fl" name="fl" class="TableFrame" border="1" bordercolor="#7C9CCF" width=463 align=center > 
        <tr class="ListTitle"> 
        <td width="25%" align="center">类别</td> 
        <td width="46%" align="center">类别名称</td> 
   <td width="25%" align="center">类别代码</td> 
   <td width="3%" align="center">&nbsp;</td> 
     </tr>
   </table> 
</td></tr>
<tr align=center><td align=center>
      <div style="overflow-y:scroll; overflow-x:visible;width:450;height:390px;position:absolute;left:270px">
      <table id="flTable" name="flTable" class="TableFrame" border="1" bordercolor="#7C9CCF" width=450 align=center> 
      
        <tr onclick="getCurrentRow()" class=ListCellRow > 
        <td width="26%" align=center >1111</td> 
        <td width="48%" align=center >2222</td> 
   <td width="26%" align=center >3333</td> 
     </tr>
    
       </table>
       </div>   
</td></tr>
</table>


分享到:
评论

相关推荐

    动态插入、添加删除表格行的JS代码

    - **`insertRow` 函数**:根据传入的索引值,在表格中插入一行,并填充两个单元格的数据。 - **`deleteRow` 函数**:根据传入的索引值,删除表格中的一行。 - **`getIndex` 函数**:获取当前点击行的索引,并显示...

    表格动态插入行

    这将在表格的末尾添加一行,包含"数据1"和"数据2"。 为了使用户能够交互式地添加行,我们可能需要将此功能与按钮事件关联起来。例如,我们可以添加一个按钮,并在其点击事件中调用`addRow`: ```html (['新数据1',...

    JS 实现动态插入输入框以及删除、位置调换

    // 在表格中插入一行 // 添加单元格并填充内容 // ... } ``` 在这个函数中,首先获取了当前表格中的行数,然后利用 `insertRow()` 方法在表格中插入了一行。接着创建多个单元格,并填充相应的HTML内容。 **插入...

    在EXCEL表格中-每一行之前插入相同数据.doc

    在 EXCEL 表格中每一行之前插入相同数据 在 EXCEL 表格中,每一行之前插入相同数据是非常有用的功能,特别是在数据分析和数据处理时。下面我们将详细介绍如何在 EXCEL 表格中每一行之前插入相同数据。 首先,我们...

    JQuery实现动态表格点击按钮表格增加一行

    ` 在表格的最后一行之后插入一个新的空行`tr`。 - 接着,为新行添加三个单元格,并分别给它们填充不同的内容。其中第一个单元格为空,第二个和第三个单元格分别插入了带有不同name属性的输入框。 - `del.innerHTML...

    在EXCEL表格中-每一行之前插入相同数据优质资料.doc

    在 EXCEL 表格中,每一行之前插入相同数据优质资料.doc 本文主要介绍了在 EXCEL 表格中,每一行之前插入相同数据的方法,并且提供了快速筛选重复数据的技巧和使用 MapInfo 软件进行地理信息处理的方法。 一、在 ...

    Excel中如何在每一行前插入标题行

    Excel中如何在每一行前插入标题行

    怎么在word2021中表格里增加插入行列.docx

    在Word 2021中插入新的行列是一项基本但非常实用的功能,它可以帮助用户灵活地调整表格结构,满足不同的数据展示需求。掌握上述方法,可以让用户更加高效地管理和编辑Word文档中的表格内容。无论是日常办公还是学术...

    C#向EXCEL模板文件中插入数据行

    假设我们有数据列表`List[]&gt; dataList`,其中每一数组代表一行数据。 ```csharp int newRow = startRow.Row; foreach (string[] data in dataList) { RowRange newRowRange = worksheet.Rows[newRow++]; for (int ...

    itext往word里插入图片和画表格

    总的来说,iText和iTextSharp为开发者提供了一种途径,尽管间接,但确实可以用来在Word文档中插入图片和创建表格。然而,如果项目需求主要围绕Word文档处理,可能需要考虑专门针对Word的库,如Apache POI或Aspose....

    vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    首先,我们需要在Vue组件的data中初始化表格数据,用于存放表格中的每一行数据。通常这些数据会被定义成一个数组,以便动态添加和删除。如下所示: ```javascript data() { return { tableData: [{ bookname: ''...

    word中大量小表格批量插入相同字段值

    在处理这类文档时,常常会遇到需要对每个表格中的特定单元格(通常是同一列或同一行)填写相同的值的情况。例如,可能需要在每个表格的最后一列填写“通过”或“未通过”的评价结果。 #### 二、传统方法的局限性 ...

    SQL_INSERT_INTO_语句

    它允许用户在已存在的表格中插入一行或多行新的数据。在理解这个语句之前,我们需要了解SQL(Structured Query Language),它是用于管理和处理关系数据库的标准语言。 SQL INSERT INTO 语句的基本语法如下: ```...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    为了确保所有列都能够被正确显示,可以向表格中插入一行空数据。这样即使没有实际数据,表格也会至少显示一行空记录,从而确保所有列都能被正常渲染。 ##### 3. 隐藏插入的空行 ```javascript $("#grid").parent()...

    Dev17.1版本RichEditControl 表格插入与合并,插入图片

    以下是关于"Dev17.1版本RichEditControl 表格插入与合并,插入图片"这一主题的详细知识点: 1. **RichEditControl介绍**: RichEditControl是DevExpress提供的一个高级文本编辑组件,它不仅支持基本的文字编辑,还...

    将excel表格里的每行内容批量插入到word的指定位置的方法(合并邮件)

    1. 一个包含数据的Excel表格,每一行代表一个独立的数据记录。 2. 一个Word模板文件,预设了数据要插入的位置和格式。 步骤1:打开Word模板 启动Microsoft Word,打开你的模板文件。在这个文件中,你需要预先设置好...

    怎样在WPS表格中快速插入多行多列.docx

    在这里,我们可以按下F4键,它将继续插入一行,然后我们可以继续按下F4键,直到我们需要的行数达到目的为止。 这两种方法都可以快速插入多行多列,但是它们的应用场景不同。方法一更适合批量插入多行,而方法二更...

    JavaScript内部测试-笔试试题和答案.doc

    JavaScript内部测试-笔试试题和答案.doc ...下面将对每个问题进行详细的解释和分析: ...13. 在下列表格中的增加订单所在行之前插入一行的位置应该是(C)。在表格中插入一行可以使用 insertRow 方法,并指定插入的位置。

    js页面插入html表格

    这段代码找到ID为`stationTable`的元素,并将其`innerHTML`属性设置为我们之前定义的`content`,从而将表格插入到页面中。 为了使表格内容可变,你可以根据需要修改`pszTime`以及其他可能的变量值。例如,如果需要...

    LayUI table新增空白行

    通过以上步骤,我们可以在LayUI的表格中动态插入空白行,尽管这不是LayUI官方提供的功能。这种方法对于那些希望在数据之间添加视觉间隔或者提供特殊提示的开发者来说非常有用。但请注意,这样的自定义可能需要维护,...

Global site tag (gtag.js) - Google Analytics