Fatal编程技术网
  • jquery/
  • Jquery 如何在添加新行时增加行号？

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

jquery jsp

Jquery 如何在添加新行时增加行号？,jquery,jsp,Jquery,Jsp,我有一个小表格，其中有一行，包括行号和文件浏览器按钮，还有一个文本框，下面有一个名为“添加附加文件”的链接，如果单击该链接，您可以创建一个相同的新空行，但我的问题是我无法增加我的行号。您可以观察我的功能@[1]： 但是现在不使用的代码我的代码如下所示 Jquery: function rowAdded(rowElement) { $(rowElement).find('input[type=text]').not('input[type=hidden]').val('');

我有一个小表格，其中有一行，包括行号和文件浏览器按钮，还有一个文本框，下面有一个名为“添加附加文件”的链接，如果单击该链接，您可以创建一个相同的新空行，但我的问题是我无法增加我的行号。您可以观察我的功能@[1]： 但是现在不使用的代码我的代码如下所示

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;

    }  

<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>
JSP:

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;

    }  

<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文件，它已经添加了一个新行，但是最后的行值和行号与以前存在的列表中的一样。现在我在这里更改了添加的行，其中没有任何值，但是我无法更改行号，任何人都可以帮助我。

我已编辑了您的。这可能会帮助你

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;
    }
}

函数addRow（）{
var table=document.getElementById（“listfiles”）；
var rowCount=table.rows.length；
//如果（行计数>0）{
var row=table.insertRow（rowCount）；
row.id=“some_id”+行数；
var newcell0=row.insertCell（0）；
newcell0.innerHTML=“”；
var newcell1=行insertCell（1）；
newcell1.innerHTML=“”；
var newcell2=row.insertCell（2）；
newcell2.innerHTML=“删除”；
// }    
}
函数deleteRow（ele）{
input_box=确认（“您确定要删除此记录吗？”）；
如果（输入框==真）{
$（ele）.tr.remove（）；
返回true；
}否则{
//单击“取消”时输出
返回false；
}
}
您的html可能如下所示

<table id="listfiles">
</table> 
<input type="button" value="Add Row" onclick="addRow();">
让我知道这是否有帮助。

因为当您单击“添加行”按钮时，您只是克隆上一行，而不是创建新行（根据您的小提琴示例）。那么，请您为我编写代码，以便创建新行而不是关闭。您在输出中的文件标签旁边没有显示任何行号。您想要输出吗？要删除，您只需要唯一的id。