将表数组值附加到另一个数组 [英] Append table array value to another array
本文介绍了将表数组值附加到另一个数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面这段代码，每当用户点击一个特定的单元格时，弹出单元格值。
我目前正在尝试做的事情是当用户点击我想要单元格值附加到另一列。我尝试使用推送方法，但它似乎并没有工作。我不确定我是否以错误的方式进行操作
$ b HTML：
< table id =fruitsTableclass =fruitstableroni skillsTable class>
< thead>< / thead>
< tbody>< / tbody>
< / table>
JavaScript：
var tbl = document.getElementById（fruitsTable）;对于（var j = 0; j
for（var i = 0; i
tbl.rows [i] .cells [j] .onclick = function（）{
obj [key2] .push（this）; //尝试将其推送到第二列。
console.log（this）;
};
}
}
函数getval（cel）{
//console.log (cel.innerHTML）;
}
var obj = {}; var key =Red Fruits; obj [key] = ['Apple'，'Cherry'，'Strawberry']; var myArray = []; myArray。 push（obj）; var key2 =Green Fruits; obj [key2] = ['Watermelon'，'Durian'，'Avacado']; var myArray2 = []; myArray2.push（obj）; var key3 =Random水果; obj [key3] = ['Soursop'，'Papaya'，'Pineapple'，'Melon']; var myArray3 = []; myArray3.push（obj）; var $ header = $（< tr> ），cols = 0，bodyString =; $。each（obj，function（key，values）{cols = Math.max（cols，values.length）; //找到最长的$ header.append（$ '< th />'）。text（key +：+ values.length））;}）; for（var i = 0; i< cols; i ++）{//或者使用.map，但这对初学者来说更加难以理解bodyString + ='< tr>'; $ .each（obj，function（key，values）{bodyString + ='< td>'+（values [i]？values [i]：）+ // ternary - 而不是if / else'< ; / td>';}）; bodyString + ='< / tr>';} $（'。fruitsTableClass thead'）。html（$ header）; $（'。fruitsTableClass tbody'）。html（bodyString）; var tbl = document.getElementById（fruitsTable ）; if（tbl！= null）{for（var i = 0; i
.class {font-family：Open Sans;}。center {display：flex; justify-content：center} .skillsTable th {border-left：1px solid＃AAA5A4; border-right：1px solid＃AAA5A4;} table {float：left;边界崩溃：崩溃; width：70％} td {border-left：1px solid＃AAA5A4; border-right：1px solid＃AAA5A4; padding-top：8px; padding-left：11px; font-size：15px;} th {color：＃0080ff; font-weight：normal; border-bottom：1px solid＃AAA5A4; padding-bottom：5px;}< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =center> < table id =fruitsTableclass =fruitsTableClass skillsTable class> < THEAD>< / THEAD> < TBODY>< / tbody的> < / table>< / div>
解决方案
重构代码以使方法 redraw UI并启用事件侦听器：
函数redraw（obj）{
var $ header = $（'< tr>'） ，
cols = 0，
bodyString =''
$ .each（obj，function（key，values）{
cols = Math.max（cols， values.length）//找到最长的
$ header.append（$（'< th />'）。text（key +'：'+ values.length））
}）
for（var i = 0; i
$ .each（obj，function（key，values）{
bodyString + ='< td>'+
（values [i]？values [i]：''）+ // ternary - instead使用if / else
'< / td>'
}）
bodyString + ='< / tr>'
}
$（'。frui （$ .B $）
$（'。fruitsTableClass tbody'）。html（bodyString）
}
函数监听器（obj）{
tbl = document.getElementById（'fruitsTable'）
if（tbl！= null）{
for（var i = 0;我< tbl.rows.length; （var j = 0; j
getval（this）
obj [key2] .push（this.innerHTML）
redraw（obj）
listener（obj）
};
}
}
}
函数getval（cel）{
alert（cel.innerHTML）
}
redraw（obj）
listener（obj）
JSFiddle - https://jsfiddle.net/gnm8wv5f/
I have this code below that popups the cell value whenever the user clicks a specific cell.
What I'm currently trying to do is when the user clicks a cell i want that cell value to be appended to another column. I tried using the push method but it doesn't seem to be working. I'm not sure if I'm doing it the wrong way
HTML:
<table id="fruitsTable" class="fruitstableroni skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
JavaScript:
var tbl = document.getElementById("fruitsTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
obj[key2].push(this); //Trying to push it to the second column.
console.log(this);
};
}
}
function getval(cel) {
//console.log(cel.innerHTML);
}
var obj = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);
var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);
var key3 = "Random Fruits";
obj[key3] = ['Soursop', 'Papaya', 'Pineapple', 'Melon'];
var myArray3 = [];
myArray3.push(obj);
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length); // find the longest
$header.append($('<th/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) { // or use .map, but this is more undertandable for beginners
bodyString += '<tr>';
$.each(obj, function(key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : "") + // ternary - instead of using if/else
'</td>';
});
bodyString += '</tr>';
}
$('.fruitsTableClass thead').html($header);
$('.fruitsTableClass tbody').html(bodyString);
var tbl = document.getElementById("fruitsTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function() {
getval(this);
obj[key2].push(this);
};
}
}
function getval(cel) {
alert(cel.innerHTML);
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center
}
.skillsTable th {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
}
table {
float: left;
border-collapse: collapse;
width: 70%
}
td {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
padding-top: 8px;
padding-left: 11px;
font-size: 15px;
}
th {
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #AAA5A4;
padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<table id="fruitsTable" class="fruitsTableClass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
解决方案
Restructure your code to have a method to redraw UI and to enable event listeners:
function redraw (obj) {
var $header = $('<tr>'),
cols = 0,
bodyString = ''
$.each(obj, function (key, values) {
cols = Math.max(cols, values.length) // find the longest
$header.append($('<th/>').text(key + ': ' + values.length))
})
for (var i = 0; i < cols; i++) { // or use .map, but this is more undertandable for beginners
bodyString += '<tr>'
$.each(obj, function (key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : '') + // ternary - instead of using if/else
'</td>'
})
bodyString += '</tr>'
}
$('.fruitsTableClass thead').html($header)
$('.fruitsTableClass tbody').html(bodyString)
}
function listener (obj) {
tbl = document.getElementById('fruitsTable')
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
getval(this)
obj[key2].push(this.innerHTML)
redraw(obj)
listener(obj)
};
}
}
}
function getval (cel) {
alert(cel.innerHTML)
}
redraw(obj)
listener(obj)
JSFiddle - https://jsfiddle.net/gnm8wv5f/
这篇关于将表数组值附加到另一个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
