当前位置：首页 → 问答吧 → 如何用jquery改写下面代码（急）

如何用jquery改写下面代码（急）

时间：2009-06-22

来源：互联网

'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" title="Click Here To EnLarge"> 函数实现的功能是点击增加文件按钮则新增一个文件上传对话框，点击移除文件按钮则删除一个文件上传对话框
function addMore() {
var theTD = document.getElementById("more");
var br = document.createElement("br");
var obj = document.createElement("input");
var button = document.createElement("input");

obj.type = "file";
obj.name = "file";
obj.size = "40";

button.type = "button";
button.value = "移除文件";

button.onclick = function() {
  theTD.removeChild(br);
  theTD.removeChild(obj);
  theTD.removeChild(button);
}

theTD.appendChild(br);
theTD.appendChild(obj);
theTD.appendChild(button);
}
页面中的代码
<td bgcolor="#78A1E6" id="more">
          -<input type="file" id="file" size="40" value="test"><input type="button" value="增加文件" onclick="addMore()">
   </td>

请教各位大侠如何用jquery改写上面得代码

作者: myeclipse10 发布时间: 2009-06-22

我是新手，只看了1天的jquery，对照API，改写如下，不知道行不

$(document).ready(function(){

    $("#more input[type='button'][value='增加文件']").click(function(){
        var fileObj = $("<br/><input type='file' size='40' value='test'/> <input type='button' value='移除文件'/>");
        fileObj.appendTo("#more");
        $("#more input[type='button'][value='移除文件']").click(function(){    fileObj.remove(); });
    });

});

<td bgcolor="#78A1E6" id="more">
<input type="file" id="file" size="40" value="test" /> <input type="button" value="增加文件" />
</td>

作者: janchie 发布时间: 2009-06-23

谢谢

作者: myeclipse10 发布时间: 2009-06-23

不断学习中~~~~~~~~~~
优化了下：

$(document).ready(function(){

    $("#more :button[value='增加文件']").click(function(){

        $("<br/><input type='file' size='40' value='test'/> <input type='button' value='移除文件'/>").appendTo("#more");

        $("#more :button[value='移除文件']").click(function(){
            $(this).prev().prev().remove();
            $(this).prev().remove();
            $(this).remove(); }
        );
    });

});

作者: janchie 发布时间: 2009-06-23

还想请教一下：
如何在上面得标签中动态的改变id的值？
例如：点击增加文件按钮，则新增了一个文件上传框，此时我如何动态设置此标签（input）的id值，如设置成file1，一次类推，下一次再点击此时的id值是
file2................，如何写？

再次谢谢!!!

作者: myeclipse10 发布时间: 2009-06-23

今天刚刚学习。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題 1</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var i=0;
$(document).ready(function ()
{
$("#more").click(function()
{
i++;
$("<div id=\"d_x\"><input type=\"file\" id=\"f_x"+i+"\"></input> <input id=\"remove"+i+"\" type=\"button\" value=\"移除文件\"></input></div>").appendTo("#d_top");

$("#remove"+i).click(function ()
{
$(this).parent().remove();

});

});
})
</script>
</head>

<body>
<div id="d_top">

<div id="d_x"><input type="file" id="f_x"></input> <input id="more" type="button" value="增加文件"></input></div>

</div>
</body>

</html>

作者: xji234 发布时间: 2009-06-23

$(document).ready(function(){
    var i = 0;
    $("#more :button[value='增加文件']").click(function(){
    i += 1;
        $("<br/><input type='file' size='40' value='test' id='file"+i+"'/> <input type='button' value='移除文件'/>").appendTo("#more");

        $("#more :button[value='移除文件']").click(function(){
        alert($(this).prev().attr("id"));   //测试生成的ID名，可删掉此行
            $(this).prev().prev().remove();
            $(this).prev().remove();
            $(this).remove(); }
        );
    });

});

作者: janchie 发布时间: 2009-06-23

谢谢楼上二位大侠，这里给你们鞠躬了！！！！！

作者: myeclipse10 发布时间: 2009-06-24

1楼有点问题只添加了id 没有添加bg

作者: clonman 发布时间: 2009-07-15

3楼和1楼结合下就更好了。。不然3楼的移除时候有问题

作者: clonman 发布时间: 2009-07-16

21-7咋老是这个问题呢

作者: liugt34 发布时间: 2009-09-21