Cloning table rows where is flexbox

Oct 31, 2010 at 8:10 PM

Hello,

I hope some could help me.   My sitsuation is this. I have html table like this:

<table width="500px" id='Lines'>
    <tr >
        <td>
            <div id="fb"></div>
        </td>
    </tr>
    
</table>
<button onClick="AddRow()"/>

I have table  Where is always one template row. I Add dynamicly new row  bottom of the table. Here is javascript for cloning table row(AddRow function):

var tbl = document.getElementById("Lines").tBodies[0];
        var newNode = tbl.rows[0].cloneNode(true);
        var allrows = tbl.length;
        tbl.appendChild(newNode);

Here Is My Document.ready

$(document).ready(function() {
        $("#ddAccount").flexbox('test.txt');
        
 });

Row Cloning works fine, but problem is that if you try write somethink on cloned text, focus is always moved to orginal flexbox(table first row).What is  the right way to this. I mean How Can  add new row flexbox in table, when I click button ?

Nov 1, 2010 at 3:07 PM

The name of items in HTML should be unique.  The way you are constructing the table rows and the flexbox makes several instances of the same items on the webpage with the same name such as "ddAccount" so the browser will naturally choose the first instance.  You need to re-write your code to make unique named instances.

Nov 2, 2010 at 1:02 PM

Hi,

 

Can you help me. I tried to loop  through all table rows and give unigue id for every new flexbox. So what i am doing wrong ? Here is my hole javascript code:

function CreateRow() {
    var tbl = document.getElementById("sortable").tBodies[0];
    var node = GetEmptyRow();
    tbl.appendChild(node);

}

function getElementFromNodeByName(node, name, tag) {
    var Elems = node.getElementsByTagName(tag);

    for (var i = 0; i < Elems.length; i++) {
        if (Elems[i].name != null && Elems[i].name != 'undefined' && Elems[i].name != '') {
            var rname = Elems[i].name;
            if (rname == name) {
                return Elems[i];
            }
        }
    }
    return null;
}
// add new row to table and rename flexbox

function GetEmptyRow() { var tbl = document.getElementById("sortable").tBodies[0]; var newNode = tbl.rows[0].cloneNode(true); var rows = tbl.rows.length newNode.style.display = ''; newNode.id = rows; var nodes = newNode.getElementsByTagName("div"); for (var i = 0; i < nodes.length; i++) { var id = nodes[i].id; nodes[i].id=id+"_"+rows; } return newNode; } $(document).ready(function() { $("#fb").flexbox('test.txt'); });
 
here is simple html file:
<table id="sortable">
    <tbody>
	<tr id="blankRow">
	    <td>
	        <div id="fb" class="test"></div>
	    </td>
	</tr>
	</tbody>
</table>