html

<table id="test_table" class="table table-bordered">
  <tbody id="test_tbody">
    <tr>
      <td>title</td>
      <td>id</td>
      <td>name</td>
      <td>detail</td>
    </tr>
    <tr>
      <td>abs</td>
      <td>1</td>
      <td>Lee</td>
      <td>888</td>
    </tr>
  </tbody>
</table>

javascript

첫번째 row(tr)의 값을 조회
document.getElementById("test_table").getElementsByTagName("tr")[0].innerHTML
document.getElementById("test_tbody").getElementsByTagName("tr")[0].innerHTML
첫번째 row(tr)의 값을 'asdf'로 변경
document.getElementById("test_table").getElementsByTagName("tr")[0].innerHTML = 'asdf'

첫번째 row(tr)의 첫번째 td값을 조회
document.getElementById("report_tbody").getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML
첫번째 row(tr)의 두번째 td값을 조회
document.getElementById("report_tbody").getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML
첫번째 row(tr)의 첫번째 td값을 'qwer'로 변경
document.getElementById("report_tbody").getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML = 'qwer'

참고

https://stackoverflow.com/questions/8508262/how-to-select-td-of-the-table-with-javascript

html

<table id="example" class="stripe" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            
            ............
            
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

javascript

$(document).ready(function() {
    $('#example').DataTable();
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js

css

The following CSS library files are loaded for use in this example to provide the styling of the table:

https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css

참고

https://datatables.net/examples/styling/stripe.html

 

DataTables example - Base style - stripe

Base style - stripe This example shows DataTables with just the stripe class specified. Name Position Office Age Start date Salary Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 Ashton

datatables.net

html의 td style 부분에 아래 내용을 추가

{ white-space:pre-line , word-break: break-all}

<table id="test_table">
  <thead>
    <tr>
      <th style="text-align:center;">ID</th>
      <th style="text-align:center;">Info Detail</th>
      <th style="text-align:center;">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
      <td style="white-space:pre-line;word-break: break-all;">
        Info 1
        Info 2
        Value 1
        Value 2
      </td>
      <td>'2021-07-10 09:00:00' 
      </td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

참고

https://stackoverflow.com/questions/10937218/how-to-show-multiline-text-in-a-table-cell

 

How to show multiline text in a table cell

I want to show a paragraph from database into a table cell. The result is a large 1 line, ignoring how its organised in database. ignoring 'enters' for example (new lines) I want to show it exactly

stackoverflow.com

-- Disable all table constraints
ALTER TABLE MyTable NOCHECK CONSTRAINT ALL

-- Enable all table constraints
ALTER TABLE MyTable WITH CHECK CHECK CONSTRAINT ALL

-- Disable single constraint
ALTER TABLE MyTable NOCHECK CONSTRAINT MyConstraint

-- Enable single constraint
ALTER TABLE MyTable WITH CHECK CHECK CONSTRAINT MyConstraint

to Top