Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/412.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用javascript和jQuery添加表_Javascript_Jquery_Html - Fatal编程技术网

使用javascript和jQuery添加表

使用javascript和jQuery添加表,javascript,jquery,html,Javascript,Jquery,Html,这里是初学者,但我花了很长时间研究其他问题,试图调试这个。我的问题如下: 我取两个数组“left”和“right”,计算它们之间的比率(使用我已经使用过的函数),并输出一个3x11数组,其中包含比率 最后,我试图生成一个包含4行12列的表。[0]行将列出“right,[0]列将列出left,[0]列将列出left,然后表的其余部分将承载相应的比率 然后它应该替换html中的相关div 也许这是显而易见的,而我却完全忽略了,或者这只是我知识中的一个漏洞。不管怎样,我已经花了一天的大部分时间在这上面

这里是初学者,但我花了很长时间研究其他问题,试图调试这个。我的问题如下:

我取两个数组“left”和“right”,计算它们之间的比率(使用我已经使用过的函数),并输出一个3x11数组,其中包含比率

最后,我试图生成一个包含4行12列的表。[0]行将列出“right,[0]列将列出left,[0]列将列出left,然后表的其余部分将承载相应的比率

然后它应该替换html中的相关div

也许这是显而易见的,而我却完全忽略了,或者这只是我知识中的一个漏洞。不管怎样,我已经花了一天的大部分时间在这上面了

<!-- html -->

<body>
<input type="input" value="Enter a value"></input>
<div id="results_table">
Ratios:
    <div id="result">ratios listed here</div>
    <div id="result1">tables here</div>
</div>
</body>


//Javascript\\

$("input").change(function () {
    var left = new Array(3);                         
    var right = new Array(11);
    left = [30, 40, 50];
    right = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; 
    result = fullCalc(left, right);                       //this calculates the ratios
    $("#result").append(result);
    var ratios = result;    
    resultstable = tableCreate(left,right,ratios);
    $("#result1").append(resultsTable);
});


function tableCreate(a, b, c) {

newTable = document.getElementById("result1");
var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
tbl.style.width = '100%';
tbl.setAttribute('border', '1');
tbl.setAttribute('id', "results_tbl");

for (var i = 0; i < a.length + 1; i++) {
    var tr = document.createElement('tr');
    tr.setAttribute('id', "tablerow" + i);
    for (var j = 0; j < b.length + 1; j++) {
        var td = document.createElement('td');
        if (i >= 1 && j === 0) {
            var frontText = document.createTextNode(a[i-1]);
            td.append(leftText);
            td.setAttribute('id', "leftTable");
        } else if (i === 0 && j >= 1) {
            var rearText = document.createTextNode(b[j-1]);
            td.append(rearText);
            td.setAttribute('id', "rightTable");
        } else {
            var ratioText = document.createTextNode(c[i-1][j-1]);
            td.appendChild(ratioText);
            td.setAttribute('id', "ratioTable");
        }

        tr.appendChild(td);
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);

}

比率:
此处列出的比率
这里的桌子
//Javascript\\
$(“输入”).change(函数(){
var left=新数组(3);
var right=新数组(11);
左=[30,40,50];
右=[11,12,13,14,15,16,17,18,19,20,21];
result=fullCalc(左、右);//计算比率
$(“#结果”)。追加(结果);
var比率=结果;
resultstable=tableCreate(左、右、比率);
$(“#result1”).append(resultsTable);
});
函数表创建(a、b、c){
newTable=document.getElementById(“结果1”);
var tbl=document.createElement('table');
var tbdy=document.createElement('tbody');
tbl.style.width='100%';
tbl.setAttribute('border','1');
tbl.setAttribute('id','results_tbl');
对于(变量i=0;i=1&&j==0){
var frontText=document.createTextNode(a[i-1]);
td.append(leftText);
td.setAttribute('id','leftTable');
}else如果(i==0&&j>=1){
var rearText=document.createTextNode(b[j-1]);
td.追加(后文);
td.setAttribute('id','rightTable');
}否则{
var ratioText=document.createTextNode(c[i-1][j-1]);
td.appendChild(ratioText);
td.setAttribute('id','ratioTable');
}
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.附加儿童(tbdy);
}

问题是没有出现表,我不确定是否正在创建一个表。有什么想法吗?

太接近了!您必须将
附加到以下位置:

tbl.appendChild(tbdy); //it has a tbody, but where is the table
//APPEND TO AN ELEMENT

太近了!您必须将
附加到以下位置:

tbl.appendChild(tbdy); //it has a tbody, but where is the table
//APPEND TO AN ELEMENT

答案是typeJV的答案和Kevin B的评论的结合

您确实有一行代码附加tableCreate的结果,但您没有从该函数返回值,因此不会发生附加

您的脚本中似乎还有一些打字错误,包括:

// create a (global) variable name with no capital letters
resultstable = tableCreate(left,right,ratios);
// refer to the variable name with a capital 'T' - that's a different variable
$("#result1").append(resultsTable);

// do you mean to make this a global variable?
newTable = document.getElementById("result1");
gdoron认为这些线路是冗余的也是正确的:

var left = new Array(3);   // allocate a new array
var right = new Array(11);
left = [30, 40, 50];       // throw away that array and create a brand new one
right = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; // same here
result = fullCalc(left, right);  // another undeclared var - this becomes global

答案是typeJV的答案和Kevin B的评论的结合

您确实有一行代码附加tableCreate的结果,但您没有从该函数返回值,因此不会发生附加

您的脚本中似乎还有一些打字错误,包括:

// create a (global) variable name with no capital letters
resultstable = tableCreate(left,right,ratios);
// refer to the variable name with a capital 'T' - that's a different variable
$("#result1").append(resultsTable);

// do you mean to make this a global variable?
newTable = document.getElementById("result1");
gdoron认为这些线路是冗余的也是正确的:

var left = new Array(3);   // allocate a new array
var right = new Array(11);
left = [30, 40, 50];       // throw away that array and create a brand new one
right = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; // same here
result = fullCalc(left, right);  // another undeclared var - this becomes global

好吧,我知道了

问题是,我强制填充表的for循环查找不存在的值。

即,当j=0和I=0时,“else if”试图查找c[-1][1]处的值,而c[-1][1]显然不存在。我只是添加了另一个“else if”以适应表上的[0][0]位置:

else if ( i === 0 && j ===0){
    var variableText = document.createTextNode("variables");
    td.appendChild(variableText);
    td.setAttribute('id', "variableTable");
}

几乎很遗憾,这只是一个编程错误。谢谢大家对我代码的改进帮助。

好的,我想出来了

问题是,我强制填充表的for循环查找不存在的值。

即,当j=0和I=0时,“else if”试图查找c[-1][1]处的值,而c[-1][1]显然不存在。我只是添加了另一个“else if”以适应表上的[0][0]位置:

else if ( i === 0 && j ===0){
    var variableText = document.createTextNode("variables");
    td.appendChild(variableText);
    td.setAttribute('id', "variableTable");
}

几乎很遗憾,这只是一个编程错误。感谢大家帮助我改进代码。

var left=new Array(3)很好,旧语法但有效<代码>左=[30,40,50]现在您覆盖了之前分配的数组,只需使用第二行即可。另外,您从未声明过
result
。您从未从TableCreate返回过表如果要使用普通JavaScript逐块添加表,为什么还要使用jQuery呢?谢谢gdoron。我认为在用值“填充”它之前必须声明一个空数组,但显然不是这样。我在tableCreate中添加了一个退货,但似乎还没有生效。。。Blazemonger,我知道这可能不是最有效的方法,但我也在尝试学习jQuery,并在目前可以实现的地方实现它。
var left=new Array(3)很好,旧语法但有效<代码>左=[30,40,50]现在您覆盖了之前分配的数组,只需使用第二行即可。另外,您从未声明过
result
。您从未从TableCreate返回过表如果要使用普通JavaScript逐块添加表,为什么还要使用jQuery呢?谢谢gdoron。我认为在用值“填充”它之前必须声明一个空数组,但显然不是这样。我在tableCreate中添加了一个退货,但似乎还没有生效。。。Blazemonger,我知道这可能不是最有效的方法,但我也在尝试学习jQuery,并在目前可以实现的地方实现它。谢谢,尽管我不确定我是否理解这个答案。我有一行代码就是这么说的。谢谢,尽管我不确定我是否理解这个答案。我有一行代码就是这么写的谢谢。使newTable成为一个全局变量将如何改变事情?它不会直接改变这段代码的行为,但是创建全局变量是一个非常重要的问题