在<li>中显示2个阵列的元素

时间:2017-02-22 15:12:48

标签: javascript html arrays

并且提前感谢您对此进行调查,我试图在html(li)标签中显示2个数组的元素。这应该是回声的格式:

array1; array2
c201;100
c202;0
c450;320
......

将被推入数组的元素来自输入字段。我已经创建了以下代码,我可以看到正确的格式,但是当我复制并粘贴上面的值时,它会丢失格式而不是有两列,它会将array2的元素粘贴到array1的元素下面:

&#13;
&#13;
    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>    
    <script>
    var array_accounts = [];
    var array_credits = [];
    var x = 0;
    var i = 0;
    var z = 0;
    function spara(){
    	var accounts_code_str = document.getElementById('accounts').value;
    	var accounts_code_comma = accounts_code_str.split(' ');
    	var accounts_code_comma = accounts_code_comma.join(';<br>');
    	array_accounts.push(accounts_code_comma);
    	console.log(array_accounts);
    	var iz_credits_str = document.getElementById('credits').value;
    	var iz_credits_comma = iz_credits_str.split(" ");
    	//var iz_credits_comma = iz_credits_comma.join('<br> ');
    	for(var z=0; z<iz_credits_comma.length; z++){
    		if(iz_credits_comma[z] < 0){
    			iz_credits_comma[z] = 0;
    		}
    	}
    	var iz_credits_comma = iz_credits_comma.join('<br> ');
    	array_credits.push(iz_credits_comma);
    	showAccounts();
    	showCredits();
    }
    </script>
    </head>
    <body>
    <h1>Accounts and IZ credits</h1>
    <div id="form">
    <form>
    <label>Insertar Accounts codes</label>
    <input type="text" name="accounts" id="accounts" />
    <label>Insertar Iz credits</label>
    <input type="text" name="credits" id="credits" />
    <input type ="button" onclick="spara()" value="Process data" />
    </form>
    </div>
    <div id="codes" style="float:left">
    <script>
    function showAccounts(){
    	for (var x=0;x<array_accounts.length;x++){
      		document.write('<div style="float:left;">'+array_accounts[x]+';</div>');
    	}
    }
    </script>
    </div>
    <div id="credits" style="float:left">
    <script>
    function showCredits(){
    for (var i=0;i<array_credits.length;i++){
      	document.write('<div style="float:left;">'+array_credits[i]+'<br></div>');
     	}
    }
    </script>
    </div>
    </body>
    </html>
&#13;
&#13;
&#13;

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

希望这有帮助!

<script>
    var array_accounts = [];
    var array_credits = [];
    var x = 0;
    var i = 0;
    var z = 0;
    function spara(){
        var accounts_code_str = document.getElementById('accounts').value;
        array_accounts = accounts_code_str.split(' ');
        console.log(array_accounts);
        var iz_credits_str = document.getElementById('credits').value;
        var iz_credits_comma = iz_credits_str.split(" ");
        array_credits=iz_credits_comma;
        //var iz_credits_comma = iz_credits_comma.join('<br> ');
        for(var z=0; z<iz_credits_comma.length; z++){
            if(iz_credits_comma[z] < 0){
                iz_credits_comma[z] = 0;
            }
        }
        showAccounts();
    }
    function showAccounts(){

        var ol = document.createElement("OL");
        for (var x=0;x<array_accounts.length;x++){
            var li = document.createElement("LI");
            var textnode = document.createTextNode(array_accounts[x]+';'+array_credits[x]);
            li.appendChild(textnode);
            ol.appendChild(li)
        }
        document.getElementById("codes").appendChild(ol);
    }
</script>

修改两个javascript函数,这应该可以解决!感谢。