Question

每次有人选择要上传的文件后，我都会尝试添加一个带有输入类型文件的新表格行。

问题是，输入类型没有插入新行;

标记语言：

<table id = "images">
    <tr>    
        <td>Title: </td><td><input type="text" name="title" size="51" required><td>
    <tr>
    <tr>
        <td>Description:  </td><td><textarea type="text" name="story" rows="10" cols="60"></textarea><td>
    <tr>
    <tr>
        <td>Author:  </td><td><input type="text" name="auth" size="51" required></textarea><td>
    <tr>
    <tr>
        <td>Image:  </td><td><input type="file" name="image[]" size="20" accept="image/jpeg, image/png" required onChange="addRow('images')"></input><td>
    <tr>
</table>

JS：

<SCRIPT language="javascript">          
    addRow(tableID) 
    {       
        var table = document.getElementById(tableID);

        var rowCount = table.getElementsByTagName("tr").length;
        var row = table.insertRow(rowCount-2);

        var cell1 = row.insertCell(0);
        cell1.innerHTML = "Images";

        var cell3 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "file";
        element2.name = "image[]";

        document.getElementsByName("image[]").lastChild.setAttribute("onChange", "addRow('images')");

        cell3.appendChild(

    }
</SCRIPT>

我看到的错误是：

未捕获的TypeError：无法调用未定义的方法'setAttribute'

非常感谢任何帮助。

彼得

Answer 1

JAVASCRIPT

document.getElementById('images').innerHTML+="<tr><td>blah-2</td></tr>";

JQUERY

$('#images tr:last').after('<tr><td>blah-2</td></tr>');

Answer 2

function addRow(tableID) 
    {

        var table = document.getElementById(tableID);

        var rowCount = table.getElementsByTagName("tr").length;
        var row = table.insertRow();

        var cell1 = row.insertCell(0);
        cell1.innerHTML = "Image:";

        var cell3 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "file";
        element2.name = "image[]";

        cell3.appendChild(element2);
        element2.setAttribute("onChange", "addRow('images')");
    }

这是一个工作小提琴： http://jsfiddle.net/C3GRN/1/

Answer 3

    $('#images tr:first').after('<tr><td><input type="text" ></td></tr>');

使用javascript插入新表行

3 个答案: