日期:2014-05-16  浏览次数:20379 次

谁能将以下jQuery代码翻译成原生态JS代码[有点难度]
function fileQueued(file)//队列添加成功
{
for(var i in selQueue)if(selQueue[i].name==file.name){swfu.cancelUpload(file.id);return false;}//防止同名文件重复添加
if(selQueue.length==0)$('#controlBtns').show();
selQueue.push(file);
allSize+=file.size;
$('#listBody').append('<tr id="'+file.id+'"><td>'+file.name+'</td><td>'+formatBytes(file.size)+'</td><td id="'+file.id+'_state">就绪</td></tr>');
$('#'+file.id).hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');})
.click(function(){selectID=file.id;$('#listBody tr').removeClass('select');$(this).removeClass('hover').addClass('select');$('#btnClear').show();})
}

又遇到table动态添加行,搞不定呀

------解决方案--------------------
探讨
我要是真的能把JS给学精通了,就不来问了。

我记得table是不能innerHTML的,不晓得append是怎样实现的。

------解决方案--------------------
JScript code
        function fileQueued(file)//队列添加成功
        {
            for(var i in selQueue){
                if(selQueue[i].name==file.name){
                    swfu.cancelUpload(file.id);
                    return false;
                }//防止同名文件重复添加
            }
            if(selQueue.length==0){
                $('#controlBtns').show();
            }
            selQueue.push(file);
            allSize+=file.size;
            
            var listBody = $("listBody"),
                tr = createElement("tr"),
                td_1 = createElement("td"),
                td_2 = createElement("td"),
                td_3 = createElement("td"),
                el = $(file.id);
            td_1.innerHTML = file.name;
            td_2.innerHTML = formatBytes(file.size);
            td_3.id = file.id + "_state";
            td_3.innerHTML = "就绪";
            tr.id = file.id;
            tr.appendChild(td_1);
            tr.appendChild(td_2);
            tr.appendChild(td_3);
            listBody.appendChild(tr);
            
            addEventListener(el, "click", function(){
                selectID=file.id;
                var trs = $$("tr");
                for(var i = 0, len = trs.length; i < len; i++){
                    removeClass(trs[i], "select");
                }
                removeClass(this, "hover");
                addClass(this, "select");
                var btnClear = $("btnClear");
                btnClear.display = "";
            });
            addEventListener(el, "mouseover", function(event){
                var relatedElement = event.relatedTarget || event.fromElement;
                if(!contains(this, relatedElement){
                    addClass(this, "hover");
                }
            });
            addEventListener(el, "mouseout", function(event){
                var relatedElement = event.relatedTarget || event.toElement;
                if(!contains(this, relatedElement){
                    removeClass(this, "hover");
                }
            });
        }
        
        function $(id){
            return document.getElementById(id);
        }
        function $$(tagName){
            return document.getElementsByTagName(tagName);
        }
        function createElement(tagName){
            return document.createElement(tagName);
        }
        function contains(elem1, elem2){
            if(elem1 === elem2){
                return true;
            }
            var parent = elem2.parentNode;
            while(parent && parent !== document){
                if(parent === elem1){
                    return true;
                }else{
                    parent = parent.parentNode;