0
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="http://akottr.github.io/css/akottr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
function change(){
$('#table2').find('thead').find('th').each(function(index){
$(this).attr('id','reportHead'+index);
});
$('#table2').find('tbody tr').each(function(index){
var rowname = $(this).find('td:first').attr('id');
$(this).find('td').each(function(index){
for(var i=0;i<=$(this).children('input,checkbox,select').length;i++){
if(i<1){
$(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index);
}else if(i>=1){
$(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index+i);
}
}
$(this).attr('id',rowname+index);
});
});
}
</script>
</head>
<body>
<table style="background:#f3f3f3" class="thin defaultTable sortable draggable" id="table2">
<thead>
<tr>
<td id='title'>
title
</td>
<td id='subtitle'>
subtitle
</td>
<td id='movie'>
movie
</td>
<td id='song'>
song
</td>
</tr>
</thead>
<tbody>
<tr>
<td id='mango'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
<tr>
<td id='honey'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
<tr>
<td id='fox'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<input type='button' name='change' value='change' onclick='change()'/>
</body>
</html>
我做的jQuery表交換概念，這個代碼，但這裏沒有提到 換我點擊更改按鈕rearange內THEAD ID和元素ID後面的代碼表 我tryed像上面的代碼，但精確的輸出我沒有得到，請幫助我（THEAD工作） 我需要輸出像這樣的tbody更改表TR TD裏面的元素ATTR ID除了標籤
1st row 1st td contain 2 input elements
1st input id='mango0'
2nd input id='mango01'
1st row 2nd td contain 1 input 1 label
1st input id='mango1'
1st row 3rd td contain 1 input
1st input id='mango2'
1st row 4th td contain 1 input 1 label
1st input id='mango3'
2nd input id='mango31'
2nd row 1st td contain 1 input 1 checkbox
1st input id='honey0'
2nd input id='honey01'
2nd row 2nd td contain 1 input 1 label
1st input id='honey1'
2nd row 3rd td contain 1 input
1st input id='honey2'
2nd row 4th td contain 2 input
1st input id='honey3'
2nd input id='honey31'