Question

我有一个小表，其中一行包含行号和文件浏览器按钮和一个文本框，下面是一个名为添加附加文件的链接，如果单击该链接，则可以使用相同的新空行但我的问题是我无法增加行号。你可以观察我的功能@ [1]：http://jsfiddle.net/6zT5W/ 但是现在代码现在没有使用我的代码如下所示。

Jquery：

function rowAdded(rowElement) {
    $(rowElement).find('input[type=text]').not('input[type=hidden]').val('');
        $(rowElement).find('input[type=file]').show();
        $(rowElement).find(".browsebutton1").removeClass("browsebutton1");
         var indexString = $(rowElement).html().split(']')[0];
        var index = indexString.substring(indexString.length-1, indexString.length);
        $("[name='ivrsFiles[" + index + "].fileName']").hide();
        $(rowElement).find('input[type=hidden]').val(0);
        $('input[type=file]').live('change', function() {
                var fileName=$(this).val();
                $(this).parent().addClass("newbrowse");

                $(this).parent().find('.description input').val(fileName.split('\\').pop());

        });
        isFormModified=true;

    }

JSP：

<body>
<table class="filetable" cellpadding='8' cellspacing='5'
                        id="listfiles">
 <c:forEach var="ivrsFile" items="${project.ivrsFiles}" varStatus="status">

   <tr class="filerowclass">
    <c:if   test="${fn:length(ivrsFile.fileName) > 0}">
        <td width='265px'  class="browsebutton1"><span class="browse-text">File <c:out value="${status.index+1}"></c:out>:</span>
          <form:hidden path="ivrsFiles[${status.index}].fileID"/>
        <input style="display:none" type="file"  name="ivrsFiles[${status.index}].file" />
        <span class="description " >
          <form:input path="ivrsFiles[${status.index}].fileName" readonly="true"/></span>
        </td>
        <td>Description:
          <form:input path="ivrsFiles[${status.index}].fileDescription" />
        </td>
        <td valign='middle'>
           <a  href="#"  class='delete-file'>Delete file</a>
        </td>

    </c:if> 

    <c:if test="${fn:length(ivrsFile.fileName) == 0}">
        <td width='265px'><span class="browse-text">File <c:out value="${status.index+1}"></c:out>:</span>
           <span class="browsebutton">  
                       <form:hidden path="ivrsFiles[${status.index}].fileID" value="0"/>
                      <input type="file" name="ivrsFiles[${status.index}].file" />  
                          <span class="description">  
                            <input name="ivrsFiles[${status.index}].fileName" type=text value="" ></input>  
                           </span>  
                    </span>
         </td>
         <td >Description:   
        <input type="text" name="ivrsFiles[${status.index}].fileDescription" />
             </td>
    <td valign='middle'>
    <a href="#" class='delete-file'>Delete file</a>     
    </td>                                       

    </c:if>

    </tr>
</c:forEach>

但是在执行rowAdded()函数之前我有一个其他的js文件，它已经添加了一个新行但是最后一行的值和行号在先前存在的列表中。现在我在这里更改了行在没有任何值的情况下添加，但我无法更改行号，任何人都可以帮助我。

Answer 1

我已编辑了您的fiddle。这可能会对你有帮助，

function addRow() {
var table = document.getElementById("listfiles");
var rowCount = table.rows.length;
//if(rowCount > 0){
    var row = table.insertRow(rowCount);
    row.id = "some_id"+rowCount;
    var newcell0 = row.insertCell(0);
    newcell0.innerHTML = "<td><input type='file' name='filename'></td>";
    var newcell1 = row.insertCell(1);
    newcell1.innerHTML = "<td><input type='text' name='description' ><td>";
    var newcell2 = row.insertCell(2);
    newcell2.innerHTML = "<td><a onclick='deleteRow(this);'>Delete<a/><td>";
// }    
}

function deleteRow(ele){
    input_box = confirm("Are you sure you want to delete this Record?");
    if (input_box == true) {
        $(ele).closest("tr").remove();
        return true;
    } else {
        // Output when Cancel is clicked
        return false;
    }
}

你的HTML可能看起来像这样，

<table id="listfiles">
</table> 
<input type="button" value="Add Row" onclick="addRow();">

如果有帮助，请告诉我。

添加新行时如何增加行号？

1 个答案: