Question

function addRow(tableID) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 10){                      
        // limit the user from creating fields more than your limits
        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;

        }
    }
    else
    {
         alert("Allowed maximum items per indent is 10. Please raise one more indent if required");

    }
}

我正在使用如下所示的Bootstrap工具提示功能，并希望获得每行的工具提示。

$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});

Answer 1

您需要根据引导工具提示文档Bootstrap Tooltip

添加以下属性

您的更新代码，

function addRow(tableID) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 10){                      
        // limit the user from creating fields more than your limits
        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;
        }

        // tooltip code

        var datatoggle =  document.createAttribute("data-toggle");
        datatoggle.value = "tooltip" ;      
        row.setAttributeNode( datatoggle );

        var title = document.createAttribute("title");
        title.value = "< Tooltip Message >"; // you can change tooltip text here
        row.setAttributeNode( title );


        // re-instantiate tooltip after the new ones are added since there is no eventhandler attached to them. 
        $('[data-toggle="tooltip"]').tooltip();
    }
    else
    {
         alert("Allowed maximum items per indent is 10. Please raise one more indent if required");

    }
}

Answer 2

    function addRow(tableID)
    {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10){                      
    // limit the user from creating fields more than your limits
    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;

        // tooltip code for each row
        var datatoggle =  document.createAttribute("data-toggle");
   // datatoggle.value = "tooltip" ;      

    var title = document.createAttribute("title");
    //title.value = "this is a tooltip"; // you can change tooltip text here


    row.setAttributeNode( datatoggle );
    row.setAttributeNode( title );

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;

    }

    // re-instantiate tooltip after the new ones are added since there is no eventhandler attached to them. (calling tooltip function here)
    $('[data-toggle="tooltip"]').tooltip();     

    }
}
else
{
     alert("Allowed maximum items per indent is 10. Please raise one more indent if required");

}

}

function deleteRow(tableID) {
        try 
        {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) 
                {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) 
            {
                if(rowCount <= 1) 
                {                       // limit the user from removing all the fields
            alert("Cannot remove all rows.");
            break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
                }
        }
        catch(e) 
            {
        alert(e);
            }
    }

这是基于@krishnaio的最终代码答案我想出来并标记为已接受

如何在使用数据表时获取每一行的工具提示

2 个答案: