javascript DOM操作的问题，在线等，急！！！！！！！！！！


<script type="text/javascript">
         var count = 0;
         function AddProduct() {
             if (count == 12)
                 return;
             count += 1;
             var File1 = document.getElementById("file1");
             var div = document.createElement("div");
             var countTxt = document.createTextNode("SN" + count);
             var inputTxt = document.createElement("input");
             inputTxt.type = "text";
             inputTxt.name = "txtSN" + count;
             var btn = document.createElement("input");
             btn.type = "button";
             btn.value = "Cancel";
             btn.onclick = function () {
                 this.parentNode.parentNode.removeChild(this.parentNode);
                 //alert(this.parentNode.nodeName);
                 var str = File1.innerHTML;
                 var re = /[^<]+/i;
                 var n = File1.getElementsByTagName("div");
                 for (var k = 0; k < n.length; k++) {
                     n[k].innerHTML = n[k].innerHTML.replace(re, "SN" + (k + 1));
                     n[k].getElementsByTagName("input").item(1).onclick = this.onclick;
                 }
                 count -= 1;
             }
             inputTxt.onchange = function () {
                              }
             div.appendChild(countTxt);
             div.appendChild(inputTxt);
             div.appendChild(btn);
             File1.appendChild(div);
         }
    </script>以代码实现了asp.net 页面中动态的添加若干个div节点，内容包括一个Text 节点，一个文本框和一个按钮，现在我想实现在inputText这些文本框中输入信息的时候，验证它里面的数据和前面的所有同类inputText中的文本信息不同。如果相同就提示并返回。代码中inputTxt.onchange = function () {   }该怎么写，求指点！

解决方案 »

  1.   

    建议楼主贴个能运行的 html+js ，这样方便解决问题，不然就只有猜了。
      

  2.   

    我猜楼主是不是担心动态添加的时候和前面重复了呀~ 如果那样的话~你建个字符串str,str=$("看你情况写抓取规则,抓到所有的同类数组元素").text( ); 哦~没法用jquery是吧~这里你str+=数组元素的innerTEXT;
    然后用最新输入的这个去验证前面的~indexof(str)~ 没有就返回-1然后你响应动作~   
      

  3.   

    我是需要验证动态添加的若干个TextBox里面的值不能有重复的，例如当我在第二个TextBox里面输入信息之后，就触发onchange事件，检验它的值是否和第一个TextBox的值是否相同，以此类推，后面的每一个TextBox的值都和前面的所有TextBox里面的值进行验证，保证没有重复的数据。动态添加TextBox上面的代码已经实现了，var inputTxt = document.createElement("input");
                 inputTxt.type = "text";
                 inputTxt.name = "txtSN" + count;
    注意代码中这几句，表示添加的第一个TextBox的ID为txtSN1,第二个为的ID为txtSN2.....现在我要怎么样去实现验证呢？
      

  4.   

    本帖最后由 net_lover 于 2012-03-19 19:59:42 编辑
      

  5.   

    LZ可以把inputTxt的name设成一样的，比如"txtSN"。
    id设成唯一的，用来区别 "txtSN" + count;inputTxt.onchange = function () {
       
       var inputTxtArr=document.getElementsByName("txtSN");
       for(var i=0;i<inputTxtArr.length;i++)
       {
           if(inputTxtArr[i].value==this.value&&inputTxtArr[i].id!=this.id)
            {
               alert("重复");
             }
       }
    }
      

  6.   

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    </head><body>
    <input type="button" id="add" value="add" />
    <div id="file1"></div>
    <script type="text/javascript">
    document.getElementById('add').onclick = function(){
    var File1 = document.getElementById("file1");
    AddProduct(File1);
    if(!initEvent.hsdInit){
    initEvent(File1);
    }
    }
    var count = 0;
    function AddProduct(container) {
    if (count == 12)
    return;
    count += 1;
    var container = document.getElementById("file1"),
    div = document.createElement("div"),
    countTxt = document.createElement("label"),
    inputTxt = document.createElement("input");
    countTxt.innerHTML = "SN" + count;
    inputTxt.type = "text";
    inputTxt.name = "txtSN" + count;
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Cancel";

    inputTxt.addEventListener("focusout", function(){
    alert(2);
    }, false);

    div.appendChild(countTxt);
    div.appendChild(inputTxt);
    div.appendChild(btn);
    container.appendChild(div);
    }
    function initEvent(elem){
    var divs = elem.getElementsByTagName("div");
    elem.onclick = function(event){
    var e = event || window.event,
    target = e.target || e.srcElement;
    if(target.tagName !== "INPUT" || target.type !== "button"){
    return false;
    }
    var parent, div, label;
    parent = target.parentNode;
    parent.parentNode.removeChild(parent);
    for(var i = 0, len = divs.length; i < len; i++){
    div = divs[i];
    if(div === parent){
    delete divs[i];
    i--;
    }else{
    label = div.getElementsByTagName("label")[0];
    label.innerHTML = label.innerHTML.replace(/\d+/, i + 1);
    }
    }
    }
    if(document.addEventListener){
    elem.addEventListener('blur', function(event){
    changeHandle(event);
    }, true);
    }else{
    elem.onfocusout = changeHandle;
    }
    var changeHandle = (function(){
    var oldValue;
    return function(event){
    var e = event || window.event,
    target = e.target || e.srcElement,
    value = target.value,
    parent = target.parentNode;
    var div, inputTxt;
    if(target.tagName !== "INPUT" || target.type !== "text"){
    return false;
    }
    if(value !== oldValue){
    oldValue = value;
    return false;
    }else{
    for(var i = 0, len = divs.length; i < len; i++){
    div = divs[i];
    if(div === parent){
    continue;
    }
    inputTxt = div.getElementsByTagName("input")[0];
    if(inputTxt.value === value){
    alert("文本框输入值重复了!");
    }
    }
    }
    }
    })();
    initEvent.hsdInit = true;
    }
        </script>
    </body>
    </html>
      

  7.   

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    </head><body>
    <input type="button" id="add" value="add" />
    <form id="file1"></form>
    <script type="text/javascript">
    document.getElementById('add').onclick = function(){
    var File1 = document.getElementById("file1");
    AddProduct(File1);
    if(!initEvent.hsdInit){
    initEvent(File1);
    }
    }
    var count = 0;
    function AddProduct(container) {
    if (count == 12)
    return;
    count += 1;
    var container = document.getElementById("file1"),
    div = document.createElement("div"),
    countTxt = document.createElement("label"),
    inputTxt = document.createElement("input");
    countTxt.innerHTML = "SN" + count;
    inputTxt.type = "text";
    inputTxt.name = "txtSN" + count;
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Cancel";

    div.appendChild(countTxt);
    div.appendChild(inputTxt);
    div.appendChild(btn);
    container.appendChild(div);
    }


    function initEvent(elem){
    var divs = elem.getElementsByTagName("div");
    elem.onclick = function(event){
    var e = event || window.event,
    target = e.target || e.srcElement;
    if(target.tagName !== "INPUT" || target.type !== "button"){
    return false;
    }
    var parent, div, label, index = 1;
    parent = target.parentNode;
    parent.parentNode.removeChild(parent);
    for(var i = 0, len = divs.length; i < len; i++){
    div = divs[i];
    if(div !== parent){
    label = div.getElementsByTagName("label")[0];
    label.innerHTML = label.innerHTML.replace(/\d+/, index++);
    }
    }
    }
    if(elem.addEventListener){
    elem.addEventListener('blur', function(event){
    changeHandle(event);
    }, true);
    }else{
    elem.attachEvent("onfocusout", function(event){
    var e = event || window.event,
    target = e.target || e.srcElement;
    var value, parent, inputTxt;
    if(target.tagName !== "INPUT" || target.type !== "text"){
    return false;
    }
    value = target.value;
    parent = target.parentNode;
    if(value !== target.oldValue){
    target.oldValue = value;
    for(var i = 0, len = divs.length; i < len; i++){
    if(divs[i] === parent){
    continue;
    }
    inputTxt = divs[i].getElementsByTagName("input")[0];
    if(inputTxt.value === value){
    alert("文本框输入值重复了!");
    target.select();
    }
    }
    }
    });
    }
    initEvent.hsdInit = true;
    }
        </script>
    </body>
    </html>
      

  8.   

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    </head><body>
    <input type="button" id="add" value="add" />
    <form id="file1"></form>
    <script type="text/javascript">
    document.getElementById('add').onclick = function(){
    var File1 = document.getElementById("file1");
    AddProduct(File1);
    if(!initEvent.hsdInit){
    initEvent(File1);
    }
    }
    var count = 0;
    function AddProduct(container) {
    if (count == 12)
    return;
    count += 1;
    var container = document.getElementById("file1"),
    div = document.createElement("div"),
    countTxt = document.createElement("label"),
    inputTxt = document.createElement("input");
    countTxt.innerHTML = "SN" + count;
    inputTxt.type = "text";
    inputTxt.name = "txtSN" + count;
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Cancel";

    div.appendChild(countTxt);
    div.appendChild(inputTxt);
    div.appendChild(btn);
    container.appendChild(div);
    }


    function initEvent(elem){
    var divs = elem.getElementsByTagName("div");
    elem.onclick = function(event){
    var e = event || window.event,
    target = e.target || e.srcElement;
    if(target.tagName !== "INPUT" || target.type !== "button"){
    return false;
    }
    var parent, div, label, index = 1;
    parent = target.parentNode;
    parent.parentNode.removeChild(parent);
    for(var i = 0, len = divs.length; i < len; i++){
    div = divs[i];
    if(div !== parent){
    label = div.getElementsByTagName("label")[0];
    label.innerHTML = label.innerHTML.replace(/\d+/, index++);
    }
    }
    }
    var changeHandle = function(event){
    var e = event || window.event,
    target = e.target || e.srcElement;
    var value, parent, inputTxt;
    if(target.tagName !== "INPUT" || target.type !== "text"){
    return false;
    }
    value = target.value;
    parent = target.parentNode;
    if(value !== target.oldValue){
    target.oldValue = value;
    for(var i = 0, len = divs.length; i < len; i++){
    if(divs[i] === parent){
    continue;
    }
    inputTxt = divs[i].getElementsByTagName("input")[0];
    if(inputTxt.value === value){
    console.log("文本框输入值重复了!");
    target.select();
    }
    }
    }
    }
    if(elem.addEventListener){
    elem.addEventListener('blur', changeHandle, true);
    }else{
    elem.attachEvent("onfocusout", function(){
    changeHandle.call(elem);
    });
    }
    initEvent.hsdInit = true;
    }
        </script>
    </body>
    </html>