使用Jquery按列联合表

时间：2017-06-22 20:42:18

标签： javascript jquery html

我必须使用相同数量的行但列数不同的表，我想要的是加入两个表但不添加更多行，而不是我想将第一个表放在左边的其他

到目前为止我已经完成了这个并且使用了表头，事情非常好，但是对于行来说有点混合：

$('#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     |
|         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+

提前多多感谢

2 个答案:

答案 0 :(得分：2)

这里更简单：

$('#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。

答案 1 :(得分：2)

问题是$(this).find("td")上的循环期望两个表具有相同的列数。

不应循环遍历单元格，而应循环遍历行，只需将行中的单元格从一个表格添加到另一个表格的行中，即可组合行。

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

function appen() {

  var head = $('#second thead tr th');
  var body = $('#second tbody tr');
  $("#first thead tr").prepend(head);
  $("#first tbody tr").each(function(i) {
    $(this).prepend(body.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>
<table class="result">
</table>

相关问题
最新问题