기존 데이터를 유지하면서 테이블에 텍스트 추가

음악 파일을 재생하는 앱을 만들고 있습니다. 응용 프로그램의 일부를 사용할 수 트랙은 레일 테이블에서 재생할 수 나열 재생 버튼을 클릭하고 트랙이 재생되기 시작하면, 내가 지금 현재 트랙 시간 데이터 트랙 시간 열을 추가 할기존 데이터를 유지하면서 테이블에 텍스트 추가

<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Title</th> 
     <th>Featured Artist</th> 
     <th>Length</th> 
     <th>Size</th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 
    <% album.tracks.each do |t| %> 
    <tbody> 
    <tr> 
     <td><%= t.track_number.to_s.rjust(2, '0') %></td> 
     <td><%= t.title %></td> 
     <td><%= t.artists.map{ |a| [a][0].name }.join(", ") %></td> 
     <td id="time"><%= "#{((t.length)/60)}:""#{(t.length % 60).to_s.rjust(2, '0')}" %></td> 
     <td><%= "#{t.size} MB" %></td> 
     <td> 
     <div class="btn-group btn-group-hover pull-left" data-id="<%= t.id%>" data-url="<%= t.track_path%>"> 
      <a class="btn btn-mini icon-play"></a> 
      <a class="btn btn-mini icon-volume-up"></a> 
      <a class="btn btn-mini icon-trash"></a> 
     </div> 
     </td> 
     <td><%= rating_for t, "sound" %></td> 
     <td></td> 
    </tr> 
    </tbody> 
    <% end %> 
</table>

그것은 다음과 같습니다. 4 : 34/00 : 10 왼쪽에있는 시간이 이미 테이블에 있고/뒤에 새 데이터를 추가하려고합니다. SoundManager (사운드 관리자)에 대한

내 자바 스크립트 코드는 다음과 같습니다

whileplaying: function() { 
    var track_time = $('#time').html(); 
    var seconds = Math.round(this.position/1000); 
    var r = seconds % 60; 
    var m = Math.floor(seconds/60); 
    var duration = (m < 10 ? '0' + m : m) + ":" + (r < 10 ? '0' + r : r); 
    $('#time').html('<p>' + duration + '</p>');

문제는이 현재 코드가 완전히를 추가하는 대신 현재 트랙의 시간 값을 대체하는, 그리고 내가 사용하는 경우

$('#time').append('<p>' + duration + '</p>');

또는

$('#time').text('<p>' + duration + '</p>');

기존 v 기존 데이터를 새로운 값으로 대체하는 대신 페이지를 스크롤합니다.

방법에 대한 아이디어가 있으십니까? 나는 아주 새로운 개발과 붙어있어이 약 2 일 동안.

감사합니다.

출처

2013-08-31 user2209090

`<span class="duration"></span>`

`<td id="time"><%= "#{((t.length)/60)}:""#{(t.length % 60).to_s.rjust(2, '0')}" %><span class="duration"></span></td>`

과를 만드는을 대상이된다

`$('#time').find('.duration').html(newVal)`

그러면 #time 텍스트 전체를 업데이트하는 대신 대상으로 지정할 수 있습니다.

제쳐두고, 반복 표 행처럼 보이는 # 선택기를 사용하기 때문에 앞으로 이동할 때 페이지의 중복 ID에 문제가 발생합니다. 또한 텍스트 컨텐츠를 꺼내는 대신 액세스 할 수있는 렌더링시 요소의 속성에 초기 값을 저장하는 경우 $.data()을 조사하십시오.

출처

2013-09-01 00:01:54 Ross

매력적인 작품처럼 빠른 응답을 주셔서 감사합니다 !! id = "time"을 사용하여이 작업을 시도했지만 트랙 지속 시간이 작동 중일 때 팁을 고려하지 않고 코드를 조정합니다. – user2209090

$ .append()를 호출 할 때마다 새로운 기간이 요소의 끝에 추가되어보고있는 문제가 발생합니다. $ .html()을 호출하면 요소 내의 모든 요소가 전달되는 기간으로 바뀝니다.

요소 내에 스팬을 작성하고 $ .html()을 사용하여 기간의 값을 바꿉니다.

템플릿에 범위를 추가합니다 : 템플릿 조정할 수있는 경우

<td id="time">10:05 <span id="duration"></span></td> 

<script> 
    whileplaying: function() { 
    ... 
    $('#duration').html(duration); 
    } 
</script>

출처

2013-08-31 23:56:01 LeGrande

기존 데이터를 유지하면서 테이블에 텍스트 추가

답변

관련 문제