jQuery添加HTML表格列 [英] jQuery add HTML table column

问题描述

我有一个这样的HTML表格：

 < table border =1> 
< tbody> 
< tr> 
< td>< a href =＃class =delete> DELETE ROW< / a> COL 1< / td> 
< td>< a href =＃class =delete> DELETE COL< / a> COL 2< / td> 
< td>< a href =＃class =delete> DELETE COL< / a> COL 3< / td> 
< td>< a href =＃class =delete> DELETE COL< / a> COL 4< / td> 
< td>< a href =＃class =delete> DELETE COL< / a> COL 5< / td> 
< td>< a href =＃class =delete> DELETE COL< / a> COL 6< / td> 
< / tr> 
< tr> 
< td> ROW 1< / td> 
< td> ROW 1< / td> 
< td> ROW 1< / td> 
< td> ROW 1< / td> 
< td> ROW 1< / td> 
< td> ROW 1< / td> 
< / tr> 
< tr> 
< td> ROW 2< / td> 
< td> ROW 2< / td> 
< td> ROW 2< / td> 
< td> ROW 2< / td> 
< td> ROW 2< / td> 
< td> ROW 2< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我需要的是一个基于其他列添加具有多个td的新列的函数。问题是，在这个HTML表中，在添加新列之前，使用jQuery删除列，所以该函数需要获取当前列配置并进行相应调整，因为行和列总是被删除或添加。

我添加了一个新列的代码，但它不添加标题：

  function addACol（）{
 var currentNumberOfTDsInARow = $（'。tblModel tr：first td'）。length; 
 newColNum = currentNumberOfTDsInARow; 
 var rows = $（'。tblModel tbody tr'）; 
 for（var i = 0; i  var lastTDClone = $（rows [i]）。find（'td：last'）。clone（）; 
 $（rows [i]）。find（'td：last'）。after（lastTDClone）; 
 
 
 
 $ div $解析方案

更新...

  var c = $（＃myTable tr：first td）。 
 $（＃myTable tr：first）。append（< td>< a href =''>删除< / a> Col+（c + 1）+< / td> ;）; 
 $（＃myTable tr：gt（0））。append（< td> Col< / td>）; 
  

如果您需要修正标题中的编号，可以使用我们在你以前的问题中工作的功能。

原始答案...

  $（＃myTable tr）。append（< td>新列< / td> ;）; 
  

或者，如果您还想添加标题，则可以将上一行限制为全部TR更大0：

  $（＃myTable tr：gt（0））。append（< td> New Column< ; / TD>中）; 
  

标题只会出现在第一个TR上：

  $（＃myTable tr：first）。append（< td>删除列LINK< / td>）; 
  

I have a HTML table like this:

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

What I need is a function to add a new column with a number of td's based on other columns. The thing is that in this HTML table, columns are removed with jQuery before new columns are added so the function needs to get the current column config and adapt accordingly because the rows and columns are always being removed or added.

I have this code for adding a new column but it doesn't add the header:

function addACol() {
    var currentNumberOfTDsInARow = $('.tblModel tr:first td').length;
    newColNum = currentNumberOfTDsInARow;
    var rows = $('.tblModel tbody tr');
    for (var i = 0; i < rows.length; i++) {
        var lastTDClone = $(rows[i]).find('td:last').clone();
        $(rows[i]).find('td:last').after(lastTDClone);
    }
}

解决方案

Update...

var c = $("#myTable tr:first td").length;
$("#myTable tr:first").append("<td><a href=''>Delete</a> Col "+(c+1)+"</td>");
$("#myTable tr:gt(0)").append("<td>Col</td>");

If you need to fix the numbering in the titles, you can use the function we worked on in your previous question.

Original Answer...

$("#myTable tr").append("<td>New Column</td>");

Or, if you want to add a header too, you can limit the previous line to all TR greater than 0:

$("#myTable tr:gt(0)").append("<td>New Column</td>");

And the header would only be on the first TR:

$("#myTable tr:first").append("<td>Delete Column LINK</td>");

这篇关于jQuery添加HTML表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！