在表中添加和删除行 [带输入字段]

Posted 2023-03-05

【中文标题】在表中添加和删除行 [带输入字段]

【英文标题】：Add and removing rows [with input field] in a table

【发布时间】：2012-03-07 03:06:59

【问题描述】：

我是个 javascript 新手。我开发了下面的代码，并修改了我发现的一些随机教程。 它应该在表中添加和删除带有输入字段的行，但是，它什么也不做。值得一提的是，我将该函数称为链接。我在标签内和标题处添加了“javascript:addRow()”。我错过了什么吗？

function addRow()

tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

if(rowCount<7)

    var row = table.insertRow(rowCount);

    var cel1=row.insertCell(0);
    var element1= document.createElement("input");
    var element1.type="text";
    cell1.appendChild(element1);

    var cell2=row.insertCell(1);
    var element2.type="text";
    cell1.appendChild(element2);

    var cell2=row.insertCell(2);
    var element3.type="text";
    cell1.appendChild(element3);

    rowCount++;





function removeRow()

    tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

if(rowCount>1)
    table.deletRow(rowCount);
    rowCount--;
    

【问题讨论】：

尝试使用jQuery：***.com/questions/170997/…

你能展示你的实际 html 吗？此外，如果这是在文档的 head 中，则可能值得将其放入页面底部的 script 块中（在 </body> 标记之前），以确保相关元素存在于记录 before 绑定事件。

【参考方案1】：

错误在这里：

var element1= document.createElement("input");
var element1.type="text";

应该是

var element1= document.createElement("input");
element1.type="text";

其他元素也类似。

你用

声明变量

var element1 = 'something';

然后用

访问它

element1 = 'something different';

还有一个错别字

var cel1=row.insertCell(0);

应该是

var cell1=row.insertCell(0);

另外，您没有定义元素 2 和 3， 使用 cell2 两次，它应该是 cell2 和 cell3，并且只附加到 cell1。

【参考方案2】：

您有几个错误，但这是基本的工作模型。我想你应该可以从这里整理出来

http://jsfiddle.net/dBzkX/

function addRow() 

    var tableID="ticketCreate";
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    if(rowCount<7)
        //You declared var in front of the same variable twice. Don't do that.
        //You were appending cells inside existing cell. Add them to row instead.
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement('input');
        element1.type="text";
        cell1.appendChild(element1);
        row.insertCell(1);
        row.insertCell(2);
    


function removeRow()
    var tableID="ticketCreate";
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    if(rowCount>1)   
        //you had type in deletRow. Also, you can pass in -1 to remove the last row        
        table.deleteRow(-1); 
    

【讨论】：

非常感谢。已经做了一些修改，它在 jsFiddle 上运行良好。但是，当我尝试在我的页面上运行时，仍然什么都不做......知道会发生什么吗？

@illichosky - 看看你的调试器。如果您使用的是 Chrome（我推荐），请按 F12。这将打开开发人员工具。左下角有控制台按钮。这将向您显示错误消息。尝试使用您的按钮，看看会发生什么。某处可能存在语法错误，导致整个事情无法运行。 youtube.com/watch?v=syJcortvE90

不知道这个功能。它显示此错误：“未捕获的类型错误：无法从行“var rowCount = table.rows.length;”中读取未定义的属性“长度”；

这意味着表或行未定义。所以没有什么可以读取的。检查表是否存在。

终于神了。我从表中放错了 id 标签。现在一切正常。谢谢