0

私はこのようなJavascriptを持っています：

<script language="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;

                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                }
            }
        }

            var showMode = 'table-cell';
            if (document.all) showMode='block';
            function toggleVis(btn){
            btn   = document.forms['tcol'].elements[btn];
            cells = document.getElementsByName('t'+btn.name);
            mode = btn.checked ? showMode : 'none';
            for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
            }
</script>

以下は、列を表示/非表示にし、新しい行を挿入するためのHTMLです。

<body>

<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
</form>

<input type="button" value="Insert Row" onclick="addRow('dataTable')">
<table id="dataTable">
<tr>
<td name="tcol1" id="tcol1"><input type="text" name="txt1"></td>
<td name="tcol2" id="tcol2"><input type="text" name="txt2"></td>
<td name="tcol3" id="tcol3"><input type="text" name="txt3"></td>
</tr>
</table>

行を挿入できますが、非表示にできるのは最初の行の列だけです。入力フィールドの属性が原因ですか？はいの場合、タグ属性を新しい行に追加するにはどうすればよいですか？これについて私を助けてください。ありがとう。

4

2 に答える 2

1

newcell.innerHTML = table.rows[0].cells[i].innerHTML属性を新しいセルにコピーしません。innerHtmlをコピーします。 table.rows[0].cells[i] cell.

したがって、属性は、属性によってセルを検索することによって機能nameするnewcelll関数に適用されません。toggleVisname

次のコードを追加して、newcellに属性をaddRow適用できます。name

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;
           newcell.setAttribute("name",table.rows[0].cells[i].getAttribute("name"));//use setAttribute to set any attribute of dom element
        newcell.style.display = table.rows[0].cells[i].style.display ; // to copy display style 
           newcell.id = table.rows[0].cells[i].getAttribute("name"); // IE workaround for getting this table cell in getElementsByName , see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7

            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
            }
        }
    }
于 2012-12-28T07:33:29.713 に答える
0

私はこれがあなたの特定の質問に答えないことを知っています、しかしあなたのコードは多くの助けを必要とします。あなたが物事をしている方法は非常に壊れやすく、はるかに簡単な方法で達成することができます。これが一例です。私は時間を節約するためにjQueryを使用しましたが、jQueryを使用したくない場合は、原則をプレーンなjavascriptにマッピングできます。

  1. インラインJavaScript呼び出しを使用しないでください。チェックボックスの親コンテナを監視して、どちらが変更されたかを判別できます。
  2. チェックボックスのonclickイベントを監視しないでください。代わりにonchangeを使用してください。これはより安全です。
  3. html5データ属性を使用して、クリックされたチェックボックスを保存できます。たとえば、<input type=checkbox name="col1" checked data-number="1"> 1。
  4. クリックしたデータフィールドを使用して、テーブル内のどのセルを変更するかを決定します。

http://jsfiddle.net/E3D2U/

$('input:checkbox').change( function() {
    //which checkbox was changed?
    var number = $(this).data('number') - 1;
    //get the table cell that matches the clicked number
    var targetTD = $('#dataTable td')[number];
    //if our checkbox is checked then...
    if ($(this).is(':checked')) {
        $(targetTD).css('background-color', 'white');            
    }
    else {
        $(targetTD).css('background-color', 'yellow');                
    }
});​
于 2012-12-28T06:52:04.003 に答える