如何安排使用JavaScript的HTML表的列

我做了一個動態添加行到我的html表的表，它也動態地在行中添加一個刪除按鈕。我需要在點擊表格標題時安排列！如何安排使用JavaScript的HTML表的列

<body> 
    <div id="app"> 
    <form id="organiser"> 
     <label id="heading">Organiser</label> 
    <br/> 
     <br/> 
     <label>No:</label> 
     <input type="text" id="description"/> 
     <br/> 
     <label>Importance Level:</label> 
     <select id="options1"> 
     <option value=" 1 " name="1" id="1"> 1 </option> 
     <option value=" 2 " name="2" id="2"> 2 </option> 
     <option value=" 3 " name="3" id="3"> 3 </option> 
     </select> 
     <br/> 
     <label>Due Date:</label> 
     <input type="date" id="date" /> 
     <br/> 
     <input type="button" id="add" value="Add" onClick="addRowToTable();"/> 
    </form> 
    <br/> 
    <table border="1" id="table"> 
     <tr> 
     <th>No</th> 
     <th>Task</th> 
     <th>Importance</th> 
     <th>Date Tasks Due</th> 
     <th></th> 
     </tr> 
    </table> 
    </div> 
</body>

來源

2012-10-18 ZiggyBird

與您的代碼周圍玩過，並提出了過多的變化（包括HTML），請參閱this fiddle。

我結束了JavaScript的是如下

function addRowToTable(table){ 
    var table = document.getElementById('table'), 
     i = table.rows.length, 
     tr = table.insertRow(i), 
     t0 = tr.insertCell(0), 
     t1 = tr.insertCell(1), 
     t2 = tr.insertCell(2), 
     t3 = tr.insertCell(3), 
     t4 = tr.insertCell(4), 
     text, elm; 

    // Give row unique values 
    tr.setAttribute('name', 'txtRow' + i); 
    tr.setAttribute('id', 'txtRow' + i); 

    // First cell 
    text = document.createTextNode(i); 
    t0.appendChild(text); 

    // Second cell 
    text = document.createTextNode(document.getElementById('description').value || 'N/A'); 
    t1.appendChild(text); 

    // Third cell 
    elm = document.getElementById('options1'); // you need to describe what you're trying to do here better 
    text = document.createTextNode(elm.value); 
    t2.appendChild(text); 

    // Fourth cell 
    elm = document.getElementById('date'); 
    text = document.createTextNode(elm.value || 'N/A'); 
    t3.appendChild(text); 

    // Delete button cell 
    elm = document.createElement('input'); 
    elm.setAttribute('type', 'button'); 
    elm.setAttribute('value', 'x'); 
    elm.setAttribute('class', 'delete'); 
    elm.onclick = function(e){ deleteButton(tr); }; 
    t4.appendChild(elm); 
} 

function sortCol(col){ 
    var table = document.getElementById('table'), 
     arr, i; 
    if(col >= table.rows[0].cells.length) return; 

    arr = Array.prototype.map.call(table.rows, function(row){ 
     return [row, row.cells[col].textContent]; 
    }); 
    arr.shift(); // skip ID, Description.. 

    arr.sort(function(a, b){ 
     return a[1].localeCompare(b[1]); 
    }); 

    for(i = 0; i<arr.length; i = i + 1){ 
     table.tBodies[0].appendChild(arr[i][0]); 
    } 
} 

function deleteButton(tr){ 
    tr.parentNode.removeChild(tr); 
}

來源

2012-10-18 23:07:17

@ZiggyBird它仍然不完整，例如看看會發生什麼，如果你添加2行，刪除1st並添加3rd。 –

另一種方式來填充單元格的內容可能是這樣的：

//Insert tags on cell 
var cell2= row.insertCell(2); 
cell2.innerHTML = '<label>Hello </label> <span>World</span>"/>';

對於大表，也許你可以使用這個： http://www.trirand.com/blog/

來源

2012-10-18 22:05:49 manuerumx

@ZiggyBird'innerHTML'是好的，如果你不想附加任何事件處理程序（我敢肯定有其他情況，但仍然）。例如，對於'secondCell'，在技術上你可以使用：'secondCell.innerHTML =「」+ document.getElementById（'描述'）。value +「」'。 – Ian

@ZiggyBird哦，是的，當然，只是想指出:)我總是覺得你更好的做法，但在你的情況下使用'innerHTML'沒有問題。如果你在已經存在的行上使用它（可能是事件已經存在的元素），那麼它不是最好的。 – Ian

如何安排使用JavaScript的HTML表的列

回答

相關問題