Javascript fn使用colspan更新th的多td_Javascript_Jquery_Datatable

Javascript fn使用colspan更新th的多td

javascript jquery

Javascript fn使用colspan更新th的多td,javascript,jquery,datatable,Javascript,Jquery,Datatable,我使用.fnUpdate（）根据来自数据库的数据生成表。我在表格的标题中有一些教师，在表格的正文中有一些信息我可以在TDs中生成数据，但我想在下面的一个th中显示多个td 问题我可以为生成的th设置colspan，但是如何通过fnupdate为每个子td分配数据。注意：教师数量和colspan数量将从DB分配，我们应动态检查colspan数量并生成相关td。我想通过fnUpdate DataTables-JS-Bin 教师1 老师2 教师3 老师2 老师5 老师6 老虎尼克松

我使用

.fnUpdate（）

根据来自数据库的数据生成

表

。

我在

表格

的标题中有一些教师，在

表格

的正文中有一些信息

我可以在

TDs

中生成数据，但我想在下面的一个

th

中显示多个

td

问题我可以为生成的

th

设置

colspan

，但是如何通过fnupdate为每个子td分配数据。 注意：教师数量和colspan数量将从DB分配，我们应动态检查colspan数量并生成相关td。

我想通过

fnUpdate


DataTables-JS-Bin
教师1
老师2
教师3
老师2
老师5
老师6
老虎尼克松
老虎尼克松2
系统架构师
爱丁堡
爱丁堡61
爱丁堡62
爱丁堡63
2011/04/25
爱丁堡3120

以下是一个可能对您有所帮助的解决方案：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th colspan="2">Name</th>
            <th>Position</th>
            <th>Office</th>
            <th colspan="3">Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>Tiger Nixon2</td>

            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>62</td>
            <td>63</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>

        </tbody>
      </table>
    </div>
  </body>
</html>

<script>



var teachers = [
    {
        name1: 'Tiger Nixon',
        name2: 'Tiger Nixon2',
        position: 'System Architect',
        office: 'Edingurgh',
        age1: '61',
        age2: '62',
        age3: '63',
        start_date: '2011/04/25',
        salary: '$3200',
    },
    {
        name1: 'Peter Nixon',
        name2: 'Paul Nixon2',
        position: 'System Architect',
        office: 'London',
        age1: '71',
        age2: '72',
        age3: '73',
        start_date: '2014/04/25',
        salary: '$5200',
    },
];

fnUpdate();


function fnUpdate() {
    var table = document.getElementById( 'example' );
    for ( var i in teachers ) {
        var teacher = teachers[i];

        var hr = document.createElement( 'tr' );

        var property = document.createElement( 'td' );

        property.innerText = teacher.name1;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.name2;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.position;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.office;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.age1;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.age2;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.age3;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.start_date;
        hr.appendChild( property );

        property = document.createElement( 'td' );
        property.innerText = teacher.salary;
        hr.appendChild( property );

        table.appendChild( hr );
    }
}







</script>


DataTables-JS-Bin
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
老虎尼克松2
系统架构师
爱丁堡
61
62
63
2011/04/25
$3,120
教师=[
{
名字1:‘老虎尼克松’，
名字2:‘老虎尼克松2’，
职位：'系统架构师'，
办公室：“爱丁堡”，
年龄1:‘61’，
年龄2:‘62’，
3岁:"63",，
开始日期：“2011/04/25”，
薪金：‘$3200’，
},
{
名字1:‘彼得·尼克松’，
名字2:‘保罗·尼克松2’，
职位：'系统架构师'，
办公室：伦敦，
年龄1:'71'，
年龄2:'72'，
3岁：73岁，
开始日期：“2014/04/25”，
薪金：‘$5200’，
},
];
fnUpdate（）；
函数fnUpdate（）{
var table=document.getElementById（'example'）；
for（教师中的变量i）{
var教师=教师[i]；
var hr=document.createElement（'tr'）；
var属性=document.createElement（'td'）；
property.innerText=teacher.name1；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.name2；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.position；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.office；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.age1；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.age2；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.age3；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.start\u日期；
儿童（财产）人力资源部；
属性=document.createElement（'td'）；
property.innerText=teacher.salary；
儿童（财产）人力资源部；
表1.儿童（hr）；
}
}

解决方案创建数据表时，将

bAutoWidth

设置为

false

const exampleTable = $('#example').dataTable({
  "bAutoWidth": false
});

使用

fnAddData（）

将新行添加到

dataTable

或使用

fnaddata（）

更新整个表

请参见下面的示例


DataTables-JS-Bin
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
老虎尼克松2
系统架构师
爱丁堡
61
62
63
2011/04/25
$3,120
常量=$（“#示例”）.dataTable({
“bAutoWidth”：错误
});
//添加新行
fnAddData（['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']）；
//用新数据更新整个表
fnUpdate（['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']）；

使用

fnAddData（）添加新行的结果

使用fnUpdate（）
是否需要在一个标题下包含两个单元格？最简单的解决方案包括一个包含两个数据段的单元格（您可以使用rowCallback修改其中一个或另一个以同时包含这两个数据段），或者简化并拥有一对“名字”和“姓氏”列。如果只将其渲染为带有标题的2列，然后使用DOM操作将标题单元格塑造为Colspan单元格，也不会太难。对不起！我应该说，电池的数量不是静态的，它会随着DB的变化而变化，示例=>一名教师可以有2或3个单元格，我们应该能够为每个子TDSThank分配正确的数据，以获得您的答案，但我需要使用数据库库中的fnUpdate函数>当colspan不是静态的、动态的，并且通过从DB中获取的数据进行更改时如何，我想使用我们拥有的索引。在初始化dataTable
时，可以使用createdRow
属性<代码>createdRow（）