Question

我希望将一个特定列的列值复制到另一个表列。

方案：

表1 ：带有 n 列的html表和来自excel的数据。

我试图实现：

表2 ：将特定列值从 table1 传递到table2的列，与Table1在同一个js文件中。

表1 - 代码：

<script type="text/javascript">

    $(function () {
        $("#upload").bind("click", function () {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt|.xlsx|.xls)$/;
            if (regex.test($("#fileUpload").val().toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var table = $("<table />");
                        var rows = e.target.result.split("\n");
                        for (var i = 0; i < rows.length; i++) {
                            var row = $("<tr />");
                            var cells = rows[i].split(",");
                            for (var j = 0; j < cells.length; j++) {
                                var cell = $("<td />");
                                cell.html(cells[j]);
                                cell.addClass("myclass" + j);
                                row.append(cell);
                            }
                            table.append(row);
                            //table.append("<td><input type='text' name='object'></td><td><input type='text' name='attr'></td>");
                        }
                        $("#dvCSV").html('The Customer Mappings are:');
                        $("#dvCSV").append(table);
                        $('#dvCSV table').addClass("dvCSV1");
                        //  $('#dvCSV table').find('td:eq(10),th:eq(10)').remove();
                        //  $('#dvCSV table').find("td").last().remove();
                        $('#dvCSV table').find('td.myclass10,th.myclass10,td.myclass9,th.myclass9').remove();
                        //  $("#dvCSV").append("<td><input type='text' name='object'></td><td><input type='text' name='attr'></td>");
                        // $('#dvCSV table').append('<td><input type="checkbox" name="cb"/></td>');
                    }
                    reader.readAsText($("#fileUpload")[0].files[0]);
                } else {
                    alert("This browser does not support HTML5.");
                }
            } else {
                alert("Please upload a valid CSV file.");
            }
        });
    });
</script>

我在这里为每个单元格创建一个css类。是否可以将特定列复制到另一个表的列？

Answer 1

为了完整起见，我决定加入两个解决方案：

将整列数据从一个表复制到另一个表（注意）我还添加了一种方法，可以根据第一个表的维度自动生成第二个表。
将一行数据从一个表复制到另一个表

将整列复制到另一个表

如果你想复制一列数据，这需要在单元格数据，相应的列和行之间进行一些映射，下面的例子应该可行（脚本中的注释）：

//When user clicks on cell
$("#table1 tr td").on("click", function() {
  var cells = [];
  var cellIndex = $(this).index();

  //loop through all rows gathering column data
  $(this).parent().siblings().andSelf().each(function() {
    var colValue = $(this).find("td").eq(cellIndex).text();
    var colKey = cellIndex;
    var rowKey = $(this).index();

    //Create JSON column object
    var column = {};
    column.Key = colKey;
    column.Value = colValue;
    column.RowKey = rowKey;

    //push onto array
    cells.push(column);
  });

  //call the copy function
  copyColumn(cells);
});

function copyColumn(cells) {
  //loop through JSON object
  $.each(cells, function(key, value) {
    //Map the data with the corresponding cell in second table
    $("#table2 tr td").each(function() {
      if ($(this).index() == value.Key && $(this).parent().index() == value.RowKey) {
        //set text value of cell
        $(this).text(value.Value);
      }
    });
  });
}

GenerateTable2();

//auto generate table2 based on total columns/rows in table1
function GenerateTable2() {
  var totalRowsToGenerate = $("#table1 tr").siblings().andSelf().length;
  var totalColumnsToGenerate = $("#table1 td").siblings().andSelf().length / totalRowsToGenerate;

  $("#table2Container").append("<table id='table2'></table>");

  for (rows = 0; rows < totalRowsToGenerate; rows++) {
    $("#table2").append("<tr></tr>");
  }
  for (columns = 0; columns < totalColumnsToGenerate; columns++) {
    $("#table2 tr").append("<td></td>");
  }
}

//When user clicks on cell
$("#table1 tr td").on("click", function() {
  var cells = [];
  var cellIndex = $(this).index();

  //loop through all rows gathering column data
  $(this).parent().siblings().andSelf().each(function() {
    var colValue = $(this).find("td").eq(cellIndex).text();
    var colKey = cellIndex;
    var rowKey = $(this).index();

    //Create JSON column object
    var column = {};
    column.Key = colKey;
    column.Value = colValue;
    column.RowKey = rowKey;

    //push onto array
    cells.push(column);
  });

  //call the copy function
  copyColumn(cells);
});

function copyColumn(cells) {
  //loop through JSON object
  $.each(cells, function(key, value) {
    //Map the data with the corresponding cell in second table
    $("#table2 tr td").each(function() {
      if ($(this).index() == value.Key && $(this).parent().index() == value.RowKey) {
        //set text value of cell
        $(this).text(value.Value);
      }
    });
  });
}

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table tr:hover {
  background-color: #ddd;
}

#table1 {
  cursor: copy;
}

#table2 {
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b><p> Table 1 </p></b>
<table id='table1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td> 
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>
<b><p> Table 2 </p></b>
<div id="table2Container"></div>

将行复制到另一个表

您可以尝试从第一个表中复制一整行并将其附加到第二个表格。

//on clicking a column
$("#table1 tr td").on("click", function() {
   //get the closest row
   var row = $(this).closest('tr').html();
   //append this row to the second table
   $('#table2').append('<tr>'+ row +'</tr>');
});

您甚至可以使用另一个非常简单的脚本

删除

$(document).on("click", "#table2 tr td", function() {
  $(this).parent().remove();
});

实施例

$("#table1 tr td").on("click", function() {
  var row = $(this).closest("tr").html();
  $("#table2").append("<tr>" + row + "</tr>");
});

$(document).on("click", "#table2 tr td", function() {
  $(this).parent().remove();
});

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table tr:hover {
  background-color: #ddd;
}

#table1 {
  cursor: copy;
}

#table2 {
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b><p> Table 1 </p></b>
<table id='table1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
<b><p> Table 2 </p></b>
<table id='table2'>
</table>

很抱歉第二张表上的光标，很难在默认选择中找到一个好的。

使用jquery将特定列值从一个html表传递到另一个html表

1 个答案:

将整列复制到另一个表

将行复制到另一个表

实施例