HTML按钮选择表格上的特定列

Question

我想知道如何选择表格上的特定列。

此功能可以选择所有表格... 我只想选择标题2,3和仅父项... 像这张照片：

我想选择用于复制列的文本（Ctrl + C）...

我正在尝试并尝试选择表格上的所有内容...

#thead {
  background-color: #fffd99;
}

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

<input type="button" value="select table" onclick="selectElementContents( document.getElementById('table') );">

<br>
<table id="table">
  <thead>
    <tr>
      <th>Code</th>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <thead>
      <tbody>
        <tr>
          <td>1774</td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>1774</td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>1774</td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
      </tbody>
</table>

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">


        <android.support.design.widget.AppBarLayout
                android:id="@+id/appbar"

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        </android.support.design.widget.AppBarLayout>
        </android.support.v7.widget.CardView>
    </android.support.design.widget.CoordinatorLayout>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

Answer 1

$('table th').click(function(){
if($(this).hasClass("selected")){
    $(this).removeClass("selected"); 
    columnIndex = $(this).index() + 1;
    $('table tr td:nth-child(' + columnIndex + ')').removeClass("selected");
}else{
    $(this).addClass("selected"); 
    columnIndex = $(this).index() + 1;
    $('table tr td:nth-child(' + columnIndex + ')').addClass("selected");
     $('table tr td:nth-child(' + columnIndex + ')').each(function(){
     console.log('Selected value:',$(this).html());
     });
}

});

.selected{
color:#0000FF;
background-color:#000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellspacing="2" cellpadding="4" border="1px">
    <tr>
        <th>HEAD 1</th>
        <th>HEAD 2</th>
        <th>HEAD 3</th>
    </tr>
    <tr>
        <td>DATA 1</td>
        <td>DATA 2</td>
        <td>DATA 3</td>
    </tr>
        <tr>
        <td>DATA 1</td>
        <td>DATA 2</td>
        <td>DATA 3</td>
    </tr>
        <tr>
        <td>DATA 1</td>
        <td>DATA 2</td>
        <td>DATA 3</td>
    </tr>
        <tr>
        <td>DATA 1</td>
        <td>DATA 2</td>
        <td>DATA 3</td>
    </tr>
        <tr>
        <td>DATA 1</td>
        <td>DATA 2</td>
        <td>DATA 3</td>
    </tr>
</table>

希望这会对您有所帮助。单击标题，然后选择整个列。