Javascript:向表添加新行,跳过元素

发布于 2024-10-18 20:59:53 字数 1572 浏览 1 评论 0原文

不久前,我发现以下 javascript 函数允许您动态添加一行到表中:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

是否有人实际上有 javascript 经验(因为我几乎没有)可以编写一个修复程序来跳过 < ;th> 标签?

这是我不想受到影响的表格部分:

<table id="scheduler">
  <tr>
    <th scope="col">Engineer</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>

我的问题是,当我有 标签时,标题行最终成为“克隆”的行,而不是仅包含 标记的行。

Awhile back, I found the following javascript function that allows you to dynamically add a row to a table:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

Does anyone, that actually has javascript experience (cause I have almost none) that could write a fix that will skip over the <th> tags?

Here's the part of the table I don't want to be affected:

<table id="scheduler">
  <tr>
    <th scope="col">Engineer</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>

My problem is that when I have the <th> tags in, the header row ends up being the row that gets "cloned", not the row that just has <td> tags in it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

苦行僧 2024-10-25 20:59:53

只需更改函数,以便您可以指定要复制的行(给定从零开始的索引)。

addRow( "scheduler", 1 ); // to base it on the 2nd row
  // give row number------v
function addRow(tableID, num) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

   // -------------------------v
   var colCount = table.rows[ num ].cells.length;
   for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        //-------------------------------v
        newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}

Just change the function so you can specify which row you want to duplicate (given a zero-based index).

addRow( "scheduler", 1 ); // to base it on the 2nd row
  // give row number------v
function addRow(tableID, num) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

   // -------------------------v
   var colCount = table.rows[ num ].cells.length;
   for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        //-------------------------------v
        newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}
幽蝶幻影 2024-10-25 20:59:53

试试这个:

function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;

for(var i=0; i<colCount; i++)
{
    var newcell = row.insertCell(i);  

    if(table.rows[0].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;             //alert(newcell.childNodes); 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
    else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[1].cells[i].innerHTML; 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
}}

Try This:

function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;

for(var i=0; i<colCount; i++)
{
    var newcell = row.insertCell(i);  

    if(table.rows[0].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;             //alert(newcell.childNodes); 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
    else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
    {
        newcell.innerHTML = table.rows[1].cells[i].innerHTML; 

        switch(newcell.childNodes[0].type)
        {                 
            case "text":                         
                newcell.childNodes[0].value = "";                         
                break;                 
            case "checkbox":                         
                newcell.childNodes[0].checked = false;                         
                break;                 
            case "select-one":                         
                newcell.childNodes[0].selectedIndex = 0;                         
                break;             
        }  
    }
}}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文