指引网

当前位置: 主页 > 网页制作 > JavaScript >

写的关于 相册多图片上传

来源:网络 作者:佚名 点击: 时间:2017-08-07 22:21
[摘要] <!-- 商品相册 --> <table width="90%" id="gallery-table" style="display:none" align="center"> <tr> <td> <a href="javascr...
<!-- 商品相册 -->
        <table width="90%" id="gallery-table" style="display:none" align="center">
          <tr>
            <td>
              <a href="javascript:;" onclick="addImg()">[+]</a>
              图片描述 <input type="text" name="gallery_desc[]" size="20" />
              上传文件 <input type="file" name="gallery_ori[]" />
            </td>
          </tr>
        </table>
 
<script type="text/javascript">
        function addImg() {
            //先找到需要插入行的 表格
            var gallery_table = document.getElementById('gallery-table');
            //在 table 对象中 插入一行
            //insertRow(插入位置),其中这个插入位置,如果为0 的话 相当于在table的开始插入一行,如果为当前的行数,相当于在table的最后插入一行。范围就是0  到 表格的行数。
            //此方法的返回值为当前插入的tr对象。
            //我们认为在表格的最后插入
            var gallery_tr = gallery_table.insertRow(gallery_table.rows.length);
            //在当前的行内在 插入 td
            //insertCell(插入位置)函数的返回值为当前插入的td对象
            var gallery_td = gallery_tr.insertCell(0);
            //最后在当前的td中增加需要的内容即可
            //通过 innerHTML属性修改即可
            gallery_td.innerHTML = '<a href="javascript:;" onclick="removeImg(this)">[-]</a>图片描述 <input type="text" name="gallery_desc[]" size="20" />上传文件 <input type="file" name="gallery_ori[]" />';
        }
        /**
         *删除某个tr,我们需要判断出来 当前需要删除那个tr。
         *我们要删除的是 包含当前 - 的tr
         *参数为 当前所点击的 链接对象
         */
        function removeImg(obj) {
            //获得当前的table
            var gallery_table = document.getElementById('gallery-table');
            //获得当前tr的位置,先获得当前的tr,需要先找到点击 连接 a。
            var gallery_tr = obj.parentNode.parentNode;
            var tr_index = gallery_tr.rowIndex;
            //删除
            gallery_table.deleteRow(tr_index);
        }
        </script>
------分隔线----------------------------