如何用Jquery替换两个表行?

时间:2018-05-29 07:32:19

标签: javascript jquery

我有一个动态表,我想要替换两行 与另一页的数据。我已经让它与一个表行一起工作但是每当我尝试替换两行时,替换一个而添加另一个。这可能吗? 我做了一个小提琴here.

我这样做的原因是在最终版本中,第二行是具有相同数据的手风琴,但显示方式不同)。 非常感谢。

HTML

<div class="container">

<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>1a</td><td>2a</td><td>3a</td><td></td></tr>

  <tr class="table"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>4a</td><td>5a</td><td>6a</td><td></td></tr>


  <tr class="table"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>

  <tr class="table_hidden"><td></td><td>7a</td><td>8a</td><td>9a</td><td></td></tr>
  <tbody>
  </table>
</div>

Jquery的

$('#data_table').on("click", ".add-row", function() {


   var newdata= '<tr class="table"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr><tr class="table_hidden"><td></td><td>a</td><td>b</td><td>c</td><td></td></tr>';

   $(this).closest('tr').replaceWith(newdata);


    });

1 个答案:

答案 0 :(得分:1)

如果要删除2行,可以先删除第2行。使用ffmpeg version N-91172-gebf85d3190 Copyright (c) 2000-2018 the FFmpeg developers built with gcc 7.3.0 (GCC) configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-bzlib --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth libavutil 56. 18.102 / 56. 18.102 libavcodec 58. 19.104 / 58. 19.104 libavformat 58. 17.100 / 58. 17.100 libavdevice 58. 4.100 / 58. 4.100 libavfilter 7. 24.100 / 7. 24.100 libswscale 5. 2.100 / 5. 2.100 libswresample 3. 2.100 / 3. 2.100 libpostproc 55. 2.100 / 55. 2.100 Splitting the commandline. Reading option '-f' ... matched as option 'f' (force format) with argument 'lavfi'. Reading option '-i' ... matched as input url with argument 'anullsrc'. Reading option '-rtsp_transport' ... matched as AVOption 'rtsp_transport' with argument 'udp'. Reading option '-i' ... matched as input url with argument 'rtsp://onvif:bridge@localhost:554/live/41cf4f34-e137-4559-8278-47d912c64c5b'. Reading option '-tune' ... matched as AVOption 'tune' with argument 'zerolatency'. Reading option '-vcodec' ... matched as option 'vcodec' (force video codec ('copy' to copy stream)) with argument 'libx264'. Reading option '-pix_fmt' ... matched as option 'pix_fmt' (set pixel format) with argument '+'. Reading option '-c:v' ... matched as option 'c' (codec name) with argument 'copy'. Reading option '-c:a' ... matched as option 'c' (codec name) with argument 'aac'. Reading option '-strict' ...Routing option strict to both codec and muxer layer matched as AVOption 'strict' with argument 'experimental'. Reading option '-f' ... matched as option 'f' (force format) with argument 'flv'. Reading option 'rtmp://x.rtmp.youtube.com/live2/xxxxxxxx' ... matched as output url. Reading option '-loglevel' ... matched as option 'loglevel' (set logging level) with argument 'debug'. Finished splitting the commandline. Parsing a group of options: global . Applying option loglevel (set logging level) with argument debug. Successfully parsed a group of options. Parsing a group of options: input url anullsrc. Applying option f (force format) with argument lavfi. Successfully parsed a group of options. Opening an input file: anullsrc. detected 8 logical cores [AVFilterGraph @ 0000027a34bad7c0] query_formats: 2 queried, 3 merged, 0 already done, 0 delayed [Parsed_anullsrc_0 @ 0000027a34badb80] sample_rate:44100 channel_layout:'stereo' nb_samples:1024 [lavfi @ 0000027a34babc80] All info found Input #0, lavfi, from 'anullsrc': Duration: N/A, start: 0.000000, bitrate: 705 kb/s Stream #0:0, 1, 1/44100: Audio: pcm_u8, 44100 Hz, stereo, u8, 705 kb/s Successfully opened the file. Parsing a group of options: input url rtsp://onvif:bridge@localhost:554/live/41cf4f34-e137-4559-8278-47d912c64c5b. Successfully parsed a group of options. Opening an input file: rtsp://onvif:bridge@localhost:554/live/41cf4f34-e137-4559-8278-47d912c64c5b. [tcp @ 0000027a34bb5980] No default whitelist set replaceWith替换为2 <tr> s

<tr>
$('#data_table').on("click", ".add-row", function() {
  var newdata = '<tr class="table"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr><tr class="table_hidden"><td></td><td>a</td><td>b</td><td>c</td><td></td></tr>';

  $(this).closest('tr').next('tr').remove(); //Remove the next tr
  $(this).closest('tr').replaceWith(newdata); //Replace the current tr
});