如何选择表格行？ [英] how select table row?

问题描述

我想制作选择表格行。在pageload上加载的默认表行是可以的，但是当我添加新行时，我无法进行选择。我怎样才能做到这一点？这是我的代码。谢谢你的帮助！

i want to make select table row. the default table row which is load on pageload is ok but when i add new row, i can't make select. how can i do this? here is my code. thank you for help!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript">
	$(function() {
    var rows = $('tr').not(':first');/
    rows.on('click', function(e) {
        var row = $(this);
        if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
            row.addClass('highlight');
        } else {
            rows.removeClass('highlight');
            row.addClass('highlight');
        }       
    });
    $(document).bind('selectstart dragstart', function(e) { 
        e.preventDefault(); return false; 
    });    
	});
	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;>
			var newcell = row.insertCell(i);

			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
			//alert(newcell.childNodes);
			switch(newcell.childNodes[0].type) {
				case "text":
						newcell.childNodes[0].value = "";
						break;
				case "checkbox":
						newcell.childNodes[0].checked = false;
						break;
				case "select-one":
						newcell.childNodes[0].selectedIndex = 0;
						break;
			}
		}
	}
</script>
<style>
	<style>
	tr td{
		cursor:pointer;
	}
	.highlight{		
		background: #EFF2FF;
	}
	.rounded-corner
	{
		font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		font-size: 12px;
		margin: 45px;
		width: 480px;
		text-align: left;
		border-collapse: collapse;
	}
	.rounded-corner thead th.rounded-company
	{
		background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
	}
	.rounded-corner thead th.rounded-q4
	{
		background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
	}
	.rounded-corner th
	{
		padding: 6px;
		font-weight: normal;
		font-size: 13px;
		color: #039;
		background: #b9c9fe;
	}
	.rounded-corner td
	{
		padding: 3px;
		border-top: 1px solid #fff;
		color: #669;
	}
	.rounded-corner tfoot td.rounded-foot-left
	{
		background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
	}
	.rounded-corner tfoot td.rounded-foot-right
	{
		background: #e8edff url('table-images/botright.png') right bottom no-repeat;
	}
	.rounded-corner tbody tr:hover td
	{
		background: #EFF2FF;
	}
</style>
</style>
<INPUT type="button" value="Add Row"  önclick="addRow('dataTable')" />
<table id="dataTable" class="rounded-corner">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Apple</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
	<tr>
        <td>2</td>
        <td>Orange</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
	<tr>
        <td>3</td>
        <td>Orange</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
</table>

推荐答案

（ function （）{
var rows =

(function() { var rows =

（' tr'）。not（' ：first'）; /
rows.on（' 点击'， function （e）{
var row =

('tr').not(':first');/ rows.on('click', function(e) { var row =

（此）;
if （（e.ctrlKey || e.metaKey）|| e.shiftKey）{
row.addClass（' highlight'）;
} else {
rows.removeClass（' 突出显示）;
row.addClass（' highlight'）;
}
}）;

(this); if ((e.ctrlKey || e.metaKey) || e.shiftKey) { row.addClass('highlight'); } else { rows.removeClass('highlight'); row.addClass('highlight'); } });

这篇关于如何选择表格行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！