Question

我正在从Javascript动态创建一个完整的HTML表。这还包括动态创建表标题，我希望每个表标题都包含一些文本。所以我想实现这样的目标：

<th>#</th> 
<th>City</th> 
<th>State</th> 
<th>Region</th>

我通过Javascript为单列标题生成此方法的方法如下，但它不起作用。因此，当我这样做时，我只得到一个<th></th> HTML，里面没有文字。

    function createTableHeaders(table) {
        // get my row template
        var table_row = $($("#my_table_row").html());

        // get my table column heading template
        var table_header = $($("#my_table_col_heading").html());

        // insert some text to the column heading
        // none of these below work ...
        table_header.innerHTML = "City";
        table_header.innerText = "City";
        table_header.text = "City";

        // append table column heading to table row with headings
        table_row.append(table_header);

        // append the entire row to the table
        table.append(table_row);

}

另外，我还希望能够在列标题中添加一些自定义CSS给我想要的文本。我怎么能这样做？

HTML模板

<!-- Define table -->
<script type="text" id="my_table">            
    <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
    <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

Answer 1

自$（$（“＃my_table_col_heading”）。html（））;将为您提供一个数组，您必须使用这样的索引访问该元素。

table_header[0].innerHTML = "City;"

工作示例：

function createTableHeaders(table) {
        // get my row template
        var table_row = $($("#my_table_row").html());

        // get my table column heading template
        var table_header = $($("#my_table_col_heading").html());
  
        table_header[0].innerHTML = "City"
        
        table_header.addClass("customclass");
        
        // append table column heading to table row with headings
        table_row.append(table_header);

        // append the entire row to the table
        table.append(table_row);
  
        $("#container").append(table);



}

createTableHeaders($($("#my_table").html()))

.customclass
{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Define table -->
<script type="text" id="my_table">            
    <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
    <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

<div id="container">
  </div>

Answer 2

您需要使用table_header.html("City")

function createTableHeaders(table) {
  // get my row template
  var table_row = $($("#my_table_row").html());

  // get my table column heading template
  var table_header = $($("#my_table_col_heading").html());

  table_header.html("City"); // This is the change

  // append table column heading to table row with headings
  table_row.append(table_header);

  // append the entire row to the table
  table.append(table_row);

  $("#container").append(table);
}

createTableHeaders($($("#my_table").html()))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Define table -->
<script type="text" id="my_table">
  <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
  <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table heading -->
<script type="text" id="my_table_col_heading">
  <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
  <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

<div id="container">
</div>

Javascript：使用文本动态创建表列标题

2 个答案: