htmlテーブルに行を動的に追加する方法

-1

HTMLテーブルに行を動的に追加したい場合は、列の番号を修正する必要があります。行を追加した後、各行と列にいくつかのテキスト値を入力したいと思います。テキスト値を入力した後、それをデータベーステーブルに保存します。どうやってするか？ここに私のコードこのコードでhtmlテーブルに行を動的に追加する方法

function addRow() { 
 
     var root = document.getElementById('mytab').getElementsByTagName('tbody')[0]; 
 
     var rows = root.getElementsByTagName('tr'); 
 
     var clone = cloneEl(rows[rows.length - 1]); 
 
     root.appendChild(clone); 
 
    } 
 
    function addColumn() { 
 
     var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone; 
 
     while (r = rows[i++]) { 
 
      c = r.getElementsByTagName('td'); 
 
      clone = cloneEl(c[c.length - 1]); 
 
      c[0].parentNode.appendChild(clone); 
 
     } 
 
    } 
 
    function cloneEl(el) { 
 
     var clo = el.cloneNode(true); 
 
     return clo; 
 
    }

#mytab td { 
 
    width: 100px; 
 
    height: 20px; 
 
    background: #cccccc; 
 
}

<html> 
 
<head> 
 
    <title>Untitled Document</title> 
 
</head> 
 
<body> 
 
<form action=""> 
 
    <input type="button" value="Add a Row" onclick="addRow()"> 
 
    <input type="button" value="Add a Column" onclick="addColumn()"> 
 
</form> 
 
<br> 
 

 
<table id="mytab" border="1" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td><input type="text" name="enter1"></td> 
 
     <td><input type="text" name="enter2"></td> 
 
    </tr> 
 

 
</table> 
 
</body> 
 
</html>

である私は、いくつかのテキストを入力し、その後、私は同じテキストが新しく追加された行と列に表示された行または列を追加するときに、問題があります。しかし、私は別のボックス内の異なるテキストを入力すると、私は列の何列の何が5

出典

2017-05-11 Debasish Choudhury

形式のコード！ –

こんにちはを更新しなければならないと言うしないように固定しなければならない、あなたは、クローニング後に入力値をクリアする必要がありませんしたいです以下のようにします。 cleanUpInputs(clone);はクローンDOMをチェックし、inputの値を削除します。以下のコードを確認してください。

function addRow() { 
 
    var root = document.getElementById('mytab').getElementsByTagName('tbody')[0]; 
 
    var rows = root.getElementsByTagName('tr'); 
 
    var clone = cloneEl(rows[rows.length - 1]); 
 
    cleanUpInputs(clone); 
 
    root.appendChild(clone); 
 
} 
 
function addColumn() { 
 
    var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone; 
 
    while (r = rows[i++]) { 
 
     c = r.getElementsByTagName('td'); 
 
     clone = cloneEl(c[c.length - 1]); 
 
     cleanUpInputs(clone); 
 
     c[0].parentNode.appendChild(clone); 
 
    } 
 
} 
 
function cloneEl(el) { 
 
    var clo = el.cloneNode(true); 
 
    return clo; 
 
} 
 

 
function cleanUpInputs(obj) { 
 
    for (var i = 0; n = obj.childNodes[i]; ++i) { 
 
    if (n.childNodes && n.tagName != 'INPUT') { 
 
     cleanUpInputs(n); 
 
    } else if (n.tagName == 'INPUT' && n.type == 'text') { 
 
     n.value = ''; 
 
    } 
 
    } 
 
}

#mytab td { 
 
width: 100px; 
 
height: 20px; 
 
background: #cccccc; 
 
}

<html> 
 
<head> 
 
    <title>Untitled Document</title> 
 
</head> 
 
<body> 
 
<form action=""> 
 
    <input type="button" value="Add a Row" onclick="addRow()"> 
 
    <input type="button" value="Add a Column" onclick="addColumn()"> 
 
</form> 
 
<br> 
 

 
<table id="mytab" border="1" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td><input type="text" name="enter1"></td> 
 
     <td><input type="text" name="enter2"></td> 
 
    </tr> 
 

 
</table> 
 
</body> 
 
</html>

出典

2017-05-11 22:37:28

これらの入力値はphpを使用してデータベースに格納できますか？ –

@DebasishChoudhuryの場合、 ''を '' – developerwjk

の後ろに移動する必要があります。データベースに列を作成するには、まずその構造を作成する必要があります。データベーステーブルに新しい列を追加するには、MySql PDOドライバで行うことができます。[PDOでPHPを使用してMySqlの既存のテーブルに新しい列を追加する]（http://stackoverflow.com/questions/20009987/add-a-new-column- to-existing-in-table-in-mysql-php-with-pdo）を使用しています。また、[POSTデータをXMLHttpRequestで送信]（http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest）を使用する必要があります。 –

htmlテーブルに行を動的に追加する方法

答えて

関連する問題