js 添加、删除表格问题。

Question

功能描述：
   1、当点击浏览的时候，会弹出一文件选择框，选则相应文件添加，添加后获取文件绝对路径、文件名、当前日期
   2、自动增加的行、单元格会有各自相应的id
   3、每添加一行第一列就会自动增加序列好、删除的时候序列号自动递减，比如递增的时候是1、2、3、4、5、6，当我删除
2、5后自动排列成1、2、3、4
   4、将该文件上传到服务器，并且可以读取（比如某行被选中，当我点击显示的时候可以显示改文件如excel文件的内容信息）问题描述：
  一、每添加一行第一列就会自动增加序列好、删除的时候序列号自动递减，比如递增的时候是1、2、3、4、5、6，当我删除
2、5后自动排列成1、2、3、4
  二、将该文件上传到服务器，并且可以读取（比如某行被选中，当我点击显示的时候可以显示改文件如excel文件的内容信息）
  三、我写的获取的绝对路径怎么不是文件的觉得路径，比如（我选择的是D:\\show\row.xls,结果得到的是c:\\dd）是咋回事呢？？页面js和代码如下：再此先谢过了。
  var filename;
        var filepath;
        function getFile() {
            document.getElementById("fileId").click();
            var fileid = document.getElementById("fileId").value;
             filename = getFileName(fileid);
             filepath = getFilePath(fileid);            addTable_tr(filename,filepath);
        }        function getFileName(str) {
            //正则表达式
            //var n = /([^\\]+)$/.exec(str);
            // return RegExp.$1;             var n = str.lastIndexOf("\\");
            if (n < 0) {
                n = str.lastIndexOf("\/");
            }
            if (n >= 0) {
                str = str.substring(n+1);
            }
            var d = str.lastIndexOf("\.");
            str = str.substring(0,d);
            return str;
        }
        function getFilePath(str) {
            var d = str.lastIndexOf("\\");
            if (d < 0) {
                d = str.lastIndexOf("\/");
            }
            if (d >= 0) {
                str = str.substring(0,d);
            }
            return str;
        }
 //添加行
        var i=1;
        function addTable_tr(filename, filepath) {
            var show = "";
            show += "<tr id=\"tr" + i + "\" name=\"row\">";
            show += "<td id=\"tdp" + i + "\">"+i+"</td>";
            show += "<td id=\"tdp" + i + "\"><input type=\"text\" id=\"txtp" + i + "\" value=\"" + filepath + "\"/></td>";
            show += "<td id=\"tdn" + i + "\"><input type=\"text\" id=\"txtn" + i + "\" value=\"" + filename + "\"/></td>";
            show += "<td id=\"tdd" + i + "\"><input type=\"text\" id=\"txtd" + i + "\" value=\"" + getDate() + "\"/></td>";
            show += "<td id=\"tdk" + i + "\"><input type=\"checkbox\" id=\"" + i + "\" onclick=\"setRowColor(this)\" name=\"ch\"/></td>";
            show += "</tr>";
            $("#tbody").append(show);
            i++;
        }
        //删除选中行
        function delete_tr() {
            $("input:checkbox[name=ch]:checked").each(function () {
                $("#tr" + this.id).remove();
                //记录所有被选中的行信息（删除的）
                document.getElementById("hidrow").value += this.id + "/";
                i--;
            })
           
           //获取行name集合
            var tr_name = document.getElementsByName("row");
            //获取删除行信息记录
            var hidrow = $("#hidrow").val().substring(0, $("#hidrow").val().length - 1).split('/');
            for (var j = 0; j < hidrow.length; j++) {
                //重新赋值            }
        }
        //设置被选中行的颜色
        function setRowColor(obj) {
            var chk = document.getElementById(obj.id);
            if (chk.checked) {
                $("#tr" + obj.id).css("background-color","red");
            } else {
                $("#tr" + obj.id).css("background-color", "");
            }
        }
        //获取系统当前日期
        function getDate() {
            var date = new Date();
            var year = date.getYear();
            var month = date.getMonth() + 1;
            var da = date.getDate();
            if(month<10){
            month="0"+month;
            }
            if(da<10){
            da="0"+da;
        }
        var str = year + "." + month + "." + da;
        return str;
        } <form id="form1" runat="server">
    <div>
    <input type="hidden" id="hidrow">
         <input type="button" id="btnB" value="浏览" onclick="getFile();" />
         <div style="display:none">
         <input type="file" id="fileId"/>
         </div>
         <br />
         <input type="button" id="btnD" value="删除" onclick="delete_tr();" />
         <input type="button" id="btnS" value="显示" onclick=""/>         <table border="2px solid red">
         <tbody id="tbody">
         </tbody>
         </table>
    </div>
    </form>

Answer 1

一,重新设置下剩下的tr的第一个td，设置下值就行了
//删除选中行
        function delete_tr() {
            $("input:checkbox[name=ch]:checked").each(function () {
                $("#tr" + this.id).remove();
                //记录所有被选中的行信息（删除的）
                document.getElementById("hidrow").value += this.id + "/";
                i--;
            })
           
           //获取行name集合
            var tr_name = document.getElementsByName("row");
            //获取删除行信息记录
            $('tr td:first-child').each(function(index,td){td.innerHTML=index+1;});
        }二，你的代码有问题，你需要添加一行时就要生成一个input，type为file，这样才会将文件上传到服务器，而你只放置一个input，导致提交时只能上传最后一个选择的文件。
三，浏览器安全设置的问题，导致获取路径不正确。这个没有通过的解决办法，只能设置你的浏览器

Answer 2

二，你的代码有问题，你需要添加一行时就要生成一个input，type为file，这样才会将文件上传到服务器，而你只放置一个input，导致提交时只能上传最后一个选择的文件。  不是很懂？能用段代码解释下吗？？谢谢 

Answer 3

你没有设置type=file吧，还有添加的时候id不要重复了

Answer 4

那个input type=file 的我是在页面中创建了的啊！ 当单击浏览按钮的时候会调用啊！
  还有什么特殊的设置吗？？
删除的时候那个tr td  input 的ID没有改变！ 要怎么设置呢？ 

Answer 5

下面改下了更新id的代码
function delete_tr() {
            $("input:checkbox[name=ch]:checked").each(function () {
                $("#tr" + this.id).remove();
                //记录所有被选中的行信息（删除的）
                document.getElementById("hidrow").value += this.id + "/";
                i--;
            })
           
           //获取行name集合
            var tr_name = document.getElementsByName("row");
            //获取删除行信息记录
            $('tr').each(function(trIndex,tr){//更新tr的id
              tr.id=tr.id.replace(/\d+$/,'')+(trIndex+1).toString();
              $(tr).find('td').each(function(tdIndex,td){//更新td的id及input的id
                td.id=td.id.replace(/\d+$/,'')+(trIndex+1).toString();
                if(tdIndex>0)td.firstChild.id=td.firstChild.id.replace(/\d+$/,'')+(trIndex+1).toString();//更新input的id
                else td.innerHTML=trIndex+1;
              });
            });
        }　　至于input的问题，不能但用一个input=file的控件，你虽然用那个input=file的控件获取到了每次选择时的文件并添加到table中，但是最后你上传到服务器去时，表单内实际只有一个input=file的控件，并且保存的是最后一次选择的文件。不知道这样说你明白了没有～　　要实现你那种效果，可以参考下以前cloudgamer兄弟写的代码，每次点击都会添加一个input=file，删除时移除对应的input=file控件模仿163的邮箱的文件选择上传 

Answer 6

showbo  太谢谢你了。现在问题解决了 呵呵……