iT邦幫忙

0

如何用js覆蓋php顯示原本的資料

各位大大好:
網址:
http://www.ee.nsysu.edu.tw/key/c1.php
2018-04-01的表格假設已用PHP從資料庫讀取資料顯示該天的紀錄(11:00 EC5566)

|-------------|
|11:00 EC5566 |=>php顯示原本資料庫的資料
|             |
|             |
|             |
|-------------|

以下為PHP,用來顯示資料庫存的資料

echo'<td id="2018-04-01" value="'.$Y."-".$yue."-".$singleday.'">'."[$day]<br>";
$sql1="select 識別碼, timest, clr,wdate from apr where bdate= :Bdate order by timest asc";
$sql =$conn->prepare($sql1);
$ar_val=array('Bdate'=>"2018-04-01" );                   
if($sql->execute($ar_val)){$row =$sql->fetchALL(); $num=count($row);
    	                }
   	    foreach($row as $key=>$showit){
    	   
    echo '<h id="'.$showit['識別碼'].'" onclick="showblock(this)">';
    echo "•".$showit['timest']." ".$showit['clr']."<br></h>";
    	  } 

如果我現在想要更新一筆資料為08:00 EC5544,並用js用json顯示即時更新的資料,並讓新資料依時間大小排序到,讓它移到11:00上方,而不是新增到下方(原本是更新到下方),或者要怎麼覆蓋原本用PHP顯示的 11:00 EC5566這筆資料,再重新將調整好的排序的 08:00 EC5544 與11:00 EC5566 顯示在表格,請問要怎麼處理呢?



|-------------|
| 08:00 EC5544|
| 11:00 EC5566|
|             |
|             |
|             |
|-------------|

console.log(obj)如下

{show: Array(2), length: 2}
length:2
show:Array(2)
0:{timest: "08:00", class: "EC5544", num: "5"}
1:{timest: "11:00", class: "EC5566", num: "1"}
length:2

以下是我寫的js,但無法將第一筆用PHP顯示的11:00 EC5566覆蓋或刪除掉..



|-------------|
| 11:00 EC5566| ==>php顯示資料庫的資料(新增一筆資料,不會覆蓋過去)
| 08:00 EC5544| ==>js立即顯示新增的資料
| 11:00 EC5566| ==>js立即顯示新增的資料
|             |
|             |
|-------------|
$.ajax({
    
    type: "POST",
    url: "writeback1.php",
    async:false,
    data: {
        "namen":namen,
        "lab":lab,
        "phone":phone,
        "bdate":bdate,
        "clr":clr,
        "thing":thing,
        "timest":timest,
        "timeov":timeov,
        "mdata":mdata,
        "ipname":ipname
            },
    error: function(jqXHR, textStatus, errorThrown) {
    alert(jqXHR.responseText);
    },
    success: function(info) {
        var obj=JSON.parse(info);
        console.log(obj);
         var a=obj.length;
             	for(i=0;i<=a;i++){
           
           document.getElementById(bdate).innerHTML +='<h id="'+obj.show[i].num+'" onclick="showblock(this)">•'+obj.show[i].timest+' '+obj.show[i].class+'</h><br>';     
                                 }
        }
    	
});

});
}
                                 }
看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2018-04-03 23:21:50 檢舉
簡單一點的話,就是ajax送出資料的時候,在後端排序,然後接收資料後先清空資料,再呈現。
froce iT邦大師 1 級 ‧ 2018-04-03 23:26:35 檢舉
然後javascript的sort可以自訂,所以你也可以接到資料後,在前端排序,然後清空顯示的資料,再呈現。
froce iT邦大師 1 級 ‧ 2018-04-03 23:29:51 檢舉
javascript/jQuery沒辦法很簡單的像vue.js或D3.js這樣,透過改變資料綁定來改變DOM。
mayyola iT邦研究生 2 級 ‧ 2018-04-03 23:41:15 檢舉
f大您好,我已先在後端排序過,可是我有試著寫要先清空資料再呈現,但一直無法成功,請問有清空原有資料的語法嗎?
因為只要一新增畫面會一直累加下去,無法清空前面js留的資料跟php呈現後端的資料 謝謝..
froce iT邦大師 1 級 ‧ 2018-04-04 00:28:55 檢舉
回覆在下面。
ccutmis iT邦高手 2 級 ‧ 2018-04-04 01:05:09 檢舉
Q:請問有清空原有資料的語法嗎?
A:有個簡單的方式給您參考,就是在
上面PHP代碼裡的這行
success: function(info) {
後面接上
document.getElementById('bdate').innerHTML='';
其它地方都不用變動,這或許是最簡單的解決方式。
對了,既然有用了jQuery那上列這行也能改寫成
$('#bdate').html('');
會用到document.getElementById通常是網頁複雜度低不需要載入jQuery庫,既然已載入那就應該多加利用才是。_。
froce iT邦大師 1 級 ‧ 2018-04-04 08:16:01 檢舉
他元素量少,用 .innerHTML='' 還ok,大量的話建議還是挑出來用remove()。
.innerHTML='' 很慢。
.html('')同理。
ccutmis iT邦高手 2 級 ‧ 2018-04-04 10:10:09 檢舉
其實用jquery .remove() 不一定會比 用 .innerHTML快喔... 這裡我寫一個範例給您參考:
http://www.web3d.url.tw/hots/timeDiff_between_jqueryfind_innerHTML.htm
jquery最為人稱道的就是它處理dom的便利性,但這便利性就是犧牲效能換來的...
扯遠了,其實對新手來說能解決問題才是重點,效能是能做到效果之後再去講究的東西,以上^~^"
froce iT邦大師 1 級 ‧ 2018-04-04 11:00:13 檢舉
蠻意外的,因為看資料都寫empty()會比較快。或許是資料太舊了。
那順便測一下用純javascript挑DOM出來移除的版本嗎?
ccutmis iT邦高手 2 級 ‧ 2018-04-04 11:26:41 檢舉
上面的網址我有加上純JS用挑DOM出來移除的按鈕,測試結果一樣是比用jquery的方式快,不過網站優化不是我的強項,只是提出些參考資料,若說錯莫怪喔:D
froce iT邦大師 1 級 ‧ 2018-04-04 11:55:04 檢舉
JQ慢其實我不意外,但是連DOM操作也比""慢倒是真的很意外。哈
看來以後就直接.innerHTML=''就好。
ccutmis iT邦高手 2 級 ‧ 2018-04-04 12:21:17 檢舉
哈~其實我還是覺得能解決問題就好,用哪個都好^~^
mayyola iT邦研究生 2 級 ‧ 2018-04-04 22:44:34 檢舉
f大與cc大您好~感謝幫忙~>"<受益良多..
不過想詢問
document.getElementById('bdate').innerHTML=''; 其中單引號跟雙引號有差別嗎?
我之前有試過這樣document.getElementById('bdate').innerHTML=" ";
但覆蓋不了..因為有時候要單引號有時雙引號 這要怎麼判別 謝謝
ccutmis iT邦高手 2 級 ‧ 2018-04-06 02:09:52 檢舉
我記得在Javascript裡面用'abc'或"DEF"都是字串,
不信你試試
<html><head></head><body>
<script>
var str1='abc';
var str2='DEF';
var str3=str1+str2;
document.write(str3);
</script>
</body></html>
可能你之前試沒成功是因為getElementById('bdate')寫成了getElementById(bdate),別問我為何知道,因為我先前給的範例是這樣寫錯了XD 後來偷改成'bdate'
但在php裡面'abc' 跟"DEF"就不太一樣,'abc'是純字串,"DEF"是 可以在字串裡面包含變數輸出或規則運算式,比如$num=1;
echo 'u r no.$num'; //輸出結果 ur no.$num
echo "u r no.$num"; //輸出結果 ur no.1
看起來用""比較利害,但相對的它對系統的負擔比用''來的重,
總之寫多你就能判別了._.
mayyola iT邦研究生 2 級 ‧ 2018-04-10 08:59:47 檢舉
謝謝cc大~getElementById(bdate)=>bdate是變數,我寫這樣才會動@_@
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
froce
iT邦大師 1 級 ‧ 2018-04-04 00:28:14
最佳解答

依你的html結構,jQuery code。應該可以動吧。

$("#" + bdate).find("h").each(function(){
    $(this).remove();
});

javascript(ES6版本,要舊版IE也可以用的話,乖乖用temp.length跑迴圈):

var temp = document.getElementById(bdate).getElementsByTagName('h');
Array.from(temp)
    .forEach(function(i){
        i.remove();
    });
ccutmis iT邦高手 2 級 ‧ 2018-04-04 06:38:31 檢舉

/images/emoticon/emoticon12.gif

0
jhit03
iT邦新手 4 級 ‧ 2018-04-10 08:53:22

我剛看你的HTML碼,發現你的 h id會重覆,這樣的設計好像不太好,因為ID最好是唯一值
,如果是我,先把新的資料存到資料庫,然後像froce所說,先清掉HTML上那個日期的所有資料
然後重新取資料庫時SQL就順便下order by,回傳就會排序好,然後再顯示在HTML上面,這樣就不用考慮如何調整順序

mayyola iT邦研究生 2 級 ‧ 2018-04-10 09:03:25 檢舉

j大您好: h id我是用資料庫的識別號應該不會重複 謝謝你~~

jhit03 iT邦新手 4 級 ‧ 2018-04-10 09:11:34 檢舉

我應該是看錯了

我要發表回答

立即登入回答