javascript - 用jQuery按列联接表

我必须具有相同数量的行但具有不同数量的列的表，我想要的是加入拖车表，但不添加更多行，而不是我想要将第一个表放在另一个表的左边。

到目前为止，我已经完成了这一工作，并且有了表头，事情还不错，但是与行有关的事情却有些混杂：

$('#boton').click(function(){
  appen();
});

function appen(){

  var head=$('#second thead tr th');
  var body=$('#second tbody tr td');
  i=0;
  $('#first').find('tr').each(function(){
      $(this).find('th').eq(0).before(head);
      $(this).find('td').each(function(){
         $(this).eq(0).before(body[i]);
         i++;
      });
  });
}

table, td { border: 1px solid black; }
table { margin-bottom: 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="first" class="merge">
  <thead>
    <tr >
        <th>num 1</th>
        <th>num 2</th>
        <th>num 3</th>
        <th>num 4</th>
    </tr>
  </thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</tbody>
</table>
<table id="second" class="merge">
  <thead>
    <tr>
      <th>num 5</th>
      <th>num 6</th>
      <th>num 7</th>
      <th>num 8</th>
    </tr>
  </thead>
<tbody>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</tbody>
</table>

<button type="button" id="boton" >boton</button>
<table class="result">
</table>

这就是我要的：

+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   num 5 |   num 6 |   num 7 |   num 8 |   num 1 |   num 2 |   num 3 |   num 4 |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   5     |   6     |   7     |   8     |   1     |   2     |   3     |   4     |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   5     |   6     |   7     |   8     |   1     |   2     |   3     |   4     |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+

这是我得到的：

+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   num 5 |   num 6 |   num 7 |   num 8 |   num 1 |   num 2 |   num 3 |   num 4 |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   5     |   1     |   6     |   2     |   7     |   3     |   8     |   4     |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |
|   5     |   1     |   6     |   2     |   7     |   3     |   8     |   4     |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+

提前非常感谢

最佳答案

在这里，简单得多：

$('#boton').click(append);

function append() {
  var rows = $('#second tr');

  $('#first tr').each(function(i) {
    $(this).append(rows.eq(i).children());
  });
}

table,
td {
  border: 1px solid black;
}

table {
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="first" class="merge">
  <thead>
    <tr>
      <th>num 1</th>
      <th>num 2</th>
      <th>num 3</th>
      <th>num 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<table id="second" class="merge">
  <thead>
    <tr>
      <th>num 5</th>
      <th>num 6</th>
      <th>num 7</th>
      <th>num 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

<button type="button" id="boton">boton</button>

更新资料

这是$.fn.join()和$.fn.joinTo()的jQuery插件：

;(function ($, window, document, undefined) {
  "use strict";

  // undefined is used here as the undefined global variable in ECMAScript 3 is
  // mutable (ie. it can be changed by someone else). undefined isn't really being
  // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
  // can no longer be modified.

  // window and document are passed through as local variables rather than global
  // as this (slightly) quickens the resolution process and can be more efficiently
  // minified (especially when both are regularly referenced in your plugin).

  // A really lightweight plugin
  $.fn.join = function join(selector) {
    var $selector = $(selector);
    var rowSelector = arguments[1];
    var selectRows;

    if (arguments.length < 2) {
      rowSelector = "> *";
    }

    if (typeof rowSelector == "string") {
      selectRows = function selectRows($parent) {
        return $parent.find(rowSelector);
      };
    } else if (typeof rowSelector == "function") {
      selectRows = function selectRows($parent) {
        return $parent.find("*").filter(rowSelector);
      };
    } else {
      return this;
    }

    return this.each(function (table) {
      var $left = selectRows($(this));
      var $right = selectRows($selector.eq(table));

      // silently fail on tables with mismatching amount of rows
      if ($left.length == $right.length) {
        $left.each(function (row) {
          $(this).append($right.eq(row).children());
        });
      }
    });
  };

  $.fn.joinTo = function joinTo(selector) {
    var $self = this;
    var $selector = $(selector);
    var rowSelector = arguments[1];
    var selectRows;

    if (arguments.length < 2) {
      rowSelector = "> *";
    }

    if (typeof rowSelector == "string") {
      selectRows = function selectRows($parent) {
        return $parent.find(rowSelector);
      };
    } else if (typeof rowSelector == "function") {
      selectRows = function selectRows($parent) {
        return $parent.find("*").filter(rowSelector);
      };
    } else {
      return this;
    }

    return $selector.each(function (table) {
      var $left = selectRows($(this));
      var $right = selectRows($self.eq(table));

      // silently fail on tables with mismatching amount of rows
      if ($left.length == $right.length) {
        $left.each(function (row) {
          $(this).append($right.eq(row).children());
        });
      }
    });
  };

})(jQuery, window, document);

// demo
$('#join').click(function () {
  var $result = $("#first")
    .clone()
    .join($("#second").clone(), "tr")
    .attr('id', 'result');
  $('#result').replaceWith($result);
});

$('#joinTo').click(function () {
  var $result = $("#first")
    .clone()
    .joinTo($("#second").clone(), "tr")
    .attr('id', 'result');
  $('#result').replaceWith($result);
});

table,
td {
  border: 1px solid black;
}

table {
  margin: 1em 0;
}

button {
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="first" class="merge">
  <thead>
    <tr>
      <th>num 1</th>
      <th>num 2</th>
      <th>num 3</th>
      <th>num 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>
<table id="second" class="merge">
  <thead>
    <tr>
      <th>num 5</th>
      <th>num 6</th>
      <th>num 7</th>
      <th>num 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

<button type="button" id="join">$("#first").join("#second", "tr")</button>
<button type="button" id="joinTo">$("#first").joinTo("#second", "tr")</button>

<table id="result">
</table>

用法

$(leftTables).join(rightTables[, rowSelector = "> *"])

$(rightTables).joinTo(leftTables[, rowSelector = "> *"])

如果任何两个表的行数不匹配，则该对表的连接将被静默忽略，并且它们将返回不变。这些方法会使leftTables和rightTables的选择发生变化。

rowSelector还可作为传递函数来过滤每个表的所有后代以确定应如何联接行的函数。假定每行的列只是所有子级。默认情况下，rowSelector仅选择每个表的子级，这就是为什么需要为实际的<table/>'s对其进行修改的原因。

两种方法都将rightTables中的行追加到leftTables中的行，并返回合并的leftTables。