Question

我有以下代码，只要用户点击特定单元格，就会弹出单元格值。

我目前要做的是当用户点击一个单元格时，我希望将该单元格值附加到另一列。我尝试使用push方法，但它似乎没有工作。我不确定我的做法是否错误

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>

Answer 1

重新构建代码，使其具有redraw UI方法并启用事件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/

Answer 2

要向表中添加行或单元格，您应使用 insertRow() 和 insertCell() 方法。

示例，如果您想在行的开头添加一个单元格（来自w3schools）：

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

或者，在最后插入：

var x = row.insertCell(row.cells.length);

使用 cells.length ，您可以找到特定行中的单元格数，这样您就可以知道插入新单元格的位置。

更多信息：w3 | MDN

Answer 3

试试这段代码。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var daraArray=[];   
$(document).ready(function(){
    $(".classTd").click(function(){
       //console.log($(this).html());
       daraArray.push($(this).html());
       console.log(daraArray);
    });
});
</script>

<style type="text/css">
    .classTd{
        text-align: center;
    }
</style>
</head>


<table id="fruitsTable" class="fruitstableroni skillsTable class" border="1">
    <thead></thead>
    <tbody>
        <tr>
            <td class="classTd" width="10%">1</td>
            <td class="classTd" width="10%">2</td>
            <td class="classTd" width="10%">3</td>
        </tr>

        <tr>
            <td class="classTd" width="10%">4</td>
            <td class="classTd" width="10%">5</td>
            <td class="classTd" width="10%">6</td>
        </tr>

        <tr>
            <td class="classTd" width="10%">7</td>
            <td class="classTd" width="10%">8</td>
            <td class="classTd" width="10%">9</td>
        </tr>
    </tbody>
</table>
</html>

Answer 4

这里的其他答案都很好，但你一定要试试AngularJs。 ng-repeat 标记可以轻松满足您的功能。

将表数组值附加到另一个数组

4 个答案: