เพิ่มแถวของตารางใน jQuery

2425

วิธีที่ดีที่สุดใน jQuery คือการเพิ่มแถวเพิ่มเติมลงในตารางเป็นแถวสุดท้าย

เป็นที่ยอมรับหรือไม่?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

มีข้อ จำกัด เกี่ยวกับสิ่งที่คุณสามารถเพิ่มลงในตารางเช่นนี้ (เช่นอินพุตเลือกจำนวนแถว) หรือไม่

javascript  jquery  html-table 
— ดาร์ริลเฮน
แหล่งที่มา
2
ขอบคุณ Ash ฉันก็แค่เรียนรู้ jQuery และพบว่ามันยากที่จะหาวิธีที่ดีที่สุดโดยเฉพาะอย่างยิ่งสิ่งที่เรียบง่าย เหตุผลที่พวกเขาเป็นคำถาม 2 ข้อเนื่องจากฉันโพสต์คำถามหนึ่งแล้วเกือบหนึ่งชั่วโมงต่อมาฉันรู้ว่าฉันควรใส่อีกคำถามหนึ่งและไม่คิดว่าฉันควรเปลี่ยนคำถามแรก
— Darryl Hein
30
ด้วยเหตุนี้: google.com/search?q=jquery+add+table+row
— Darryl Hein
17
FYI - หลีกเลี่ยงการใช้ผนวกหลายอัน (ลดประสิทธิภาพลงอย่างมาก) แทนที่จะสร้างสตริงของคุณหรือใช้การเข้าร่วม JavaScript ซึ่งเร็วกว่ามาก
— Gerrit Brink
— รุ่นซุปเปอร์
ในกรณีที่ถ้าแถวซับซ้อนเกินไปสิ่งที่ฉันทำคือเก็บแถวแรกที่ถูกซ่อนไว้กับโครงสร้างที่ต้องการทำโคลนและปรับเปลี่ยนข้อความและแทรกหลังแถวแรกด้วยวิธีนี้ถ้าคุณดึงข้อมูลจากการตอบสนอง Ajax ตารางของคุณจะถูกสร้างขึ้นจำไว้ โคลนนอกลูปจากนั้นใช้เพื่อแก้ไขเนื้อหาภายในลูป $ ("# mainTable tbody") ผนวก (แถว); แถวเป็นสำเนาโคลนปรับเปลี่ยน :)
— Aadam

คำตอบ:

2143

วิธีที่คุณแนะนำไม่ได้รับประกันว่าจะให้ผลลัพธ์ที่คุณต้องการ - จะเป็นอย่างไรถ้าคุณมีtbodyตัวอย่างเช่น:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

คุณจะได้รับสิ่งต่อไปนี้:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

ฉันจะแนะนำวิธีนี้แทน:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

คุณสามารถรวมอะไรก็ได้ในafter()วิธีการตราบเท่าที่มันเป็น HTML ที่ถูกต้องรวมถึงหลายแถวตามตัวอย่างข้างต้น

อัปเดต: โปรดตอบคำตอบนี้ใหม่หลังจากทำกิจกรรมกับคำถามนี้ ความไม่มีเปลือกตาทำให้ความคิดเห็นที่ดีว่าจะมีtbodyใน DOM เสมอ; สิ่งนี้เป็นจริง แต่ถ้ามีอย่างน้อยหนึ่งแถว หากคุณไม่มีแถวจะไม่มีtbodyถ้าคุณไม่ได้ระบุเอง

DaRKoN_ แนะนำต่อท้ายไปมากกว่าการเพิ่มเนื้อหาหลังจากที่ผ่านมาtbody trสิ่งนี้ทำให้เกิดปัญหาเรื่องการไม่มีแถว แต่ก็ยังไม่เป็นแบบกระสุนเพราะคุณสามารถมีtbodyองค์ประกอบหลายอย่างในทางทฤษฎีและแถวจะถูกเพิ่มเข้าไปในแต่ละแถว

การชั่งน้ำหนักทุกอย่างขึ้นไปฉันไม่แน่ใจว่าจะมีโซลูชันบรรทัดเดียวที่อธิบายสถานการณ์ที่เป็นไปได้ทุกสถานการณ์ คุณจะต้องตรวจสอบให้แน่ใจว่ารหัส jQuery นับด้วยมาร์กอัปของคุณ

ฉันคิดว่าทางออกที่ปลอดภัยที่สุดน่าจะช่วยให้คุณมั่นใจได้ว่าtableจะมีอย่างน้อยหนึ่งรายการtbodyในมาร์กอัปของคุณแม้ว่าจะไม่มีแถวก็ตาม บนพื้นฐานนี้คุณสามารถใช้สิ่งต่อไปนี้ซึ่งจะทำงานได้หลายแถวที่คุณมี (และบัญชีสำหรับtbodyองค์ประกอบหลายรายการ):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
— ลุคเบนเน็ตต์
แหล่งที่มา
6
@ พระรามไม่ว่าจะไม่ จะต้องมีทางออกที่ดีกว่า
— Brian Liang
40
จะมีร่างกายอยู่ใน DOM เสมอ
— หนังตา
4
tbody ที่ว่างเปล่าไม่ได้ตรวจสอบความถูกต้องของ html ของคุณ
— 2ni
40
การปรับปรุงเล็กน้อยในวิธีแก้ปัญหาที่ดีเป็นอย่างอื่นก็คือการปรับตัวเลือกให้เหมาะสมที่สุด คุณจะได้รับการปรับปรุงความเร็วด้วย: แทน$('#myTable').find('tbody:last') $('#myTable > tbody:last')
— Erik TöyräSilfverswärd
2
"หนังตาทำให้ความคิดเห็นที่ดีว่าจะมีคนใน DOM" - ฉันแค่ลองทำสิ่งนี้โดยไม่มีใครสักคนและมันไม่ได้ผล - มันใช้ได้เฉพาะในกรณีที่มีคน
— BrainSlugs83
771

jQuery มีสิ่งอำนวยความสะดวกในตัวเพื่อจัดการองค์ประกอบ DOM ได้ทันที

คุณสามารถเพิ่มอะไรก็ได้ลงในตารางของคุณเช่นนี้

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

$('<some-tag>')สิ่งใน jQuery เป็นวัตถุแท็กที่สามารถมีหลายattrคุณลักษณะที่สามารถตั้งค่าและได้รับเช่นเดียวกับซึ่งหมายถึงข้อความระหว่างแท็กที่นี่:text<tag>text</tag>

นี่คือการเยื้องที่ค่อนข้างแปลก แต่ก็ง่ายกว่าที่คุณจะเห็นสิ่งที่เกิดขึ้นในตัวอย่างนี้

— นีล
แหล่งที่มา
60
สำหรับผู้ที่พยายามทำเช่นนี้ให้สังเกตตำแหน่งของวงเล็บอย่างระมัดระวัง การทำรังที่เหมาะสมเป็นสิ่งสำคัญ
— Ryan Lundy
9
สิ่งที่เกี่ยวกับแท็กปิด? พวกเขาไม่จำเป็นหรือไม่
— senfo
9
ไม่ควร $ ("# tableClassname") เป็น $ ("# tableID") เนื่องจากสัญลักษณ์แฮชอ้างถึง ID ไม่ใช่ชื่อ class?
— Dave
7
ฉันเกลียดการผูกมัดแปลก ๆ มันเป็นฝันร้ายที่จะรักษารหัสให้เต็มไปด้วยสิ่งต่าง ๆ
— เต้น
4
@senfo เพิ่มเด็กองค์ประกอบจะสร้างเหล่านั้นโดยอัตโนมัติ
— Michel de Ruiter
308

ดังนั้นสิ่งต่าง ๆ ก็เปลี่ยนไปนับตั้งแต่@Luke Bennettตอบคำถามนี้ นี่คือการอัปเดต

jQuery ตั้งแต่รุ่น 1.4 (?) ตรวจพบโดยอัตโนมัติหากองค์ประกอบที่คุณกำลังพยายามที่จะแทรก (ใช้ใด ๆ ของappend(), prepend(), before()หรือafter()วิธีการ) เป็น<tr>และแทรกลงในครั้งแรก<tbody>ในตารางของคุณหรือ wraps มันเข้าไปใหม่<tbody>ถ้าใครไม่ได้ ที่มีอยู่

ดังนั้นใช่โค้ดตัวอย่างของคุณเป็นที่ยอมรับและจะทำงานได้ดีกับ jQuery 1.4+ ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
— Salman von Abbas
แหล่งที่มา
2
ระวังด้วยสมมติฐานนี้ หากมาร์กอัปที่ต่อท้ายของคุณเริ่มต้นด้วย \ n หรือ \ n \ r, jQuery จะไม่ตรวจพบว่ามันเป็น <tr> และจะผนวกเข้ากับ <table> และไม่ใช่ไปยัง <tbody> ฉันเพิ่งพบสิ่งนี้ด้วยมาร์กอัปที่สร้างโดยมุมมอง MVC ที่มีบรรทัดเพิ่มเติมในตอนเริ่มต้น
— Mik
@ Mik ขอบคุณสำหรับหัวขึ้น! ฉันเดาว่าyourString.trim()จะแก้ไขได้
— Salman von Abbas
แน่นอน แต่คุณต้องคิดเกี่ยวกับมัน ใช้นิสัยต่อท้าย <tbody> ให้ดีกว่าถ้าคุณรู้ว่ามันมีอยู่
— Mik
jQuery 3.1 ยังต้องการให้มีการระบุตัวบุคคล ลองดูที่นี่: jsfiddle.net/umaj5zz9/2
— user984003
นี่ทำให้หน้าของฉันรีเฟรช ฉันจะป้องกันได้อย่างไร
— Avi
168

เกิดอะไรขึ้นถ้าคุณมี<tbody>และ<tfoot>?

เช่น:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

จากนั้นมันจะแทรกแถวใหม่ของคุณในส่วนท้าย - ไม่ใช่กับร่างกาย

ดังนั้นทางออกที่ดีที่สุดคือการรวมถึง<tbody>แท็กและการใช้งานมากกว่า.append.after

$("#myTable > tbody").append("<tr><td>row content</td></tr>");
— ChadT
แหล่งที่มา
10
คุณใช้ tfoot ของคุณไม่ถูกต้อง มันควรจะมาก่อน tbody ไม่หลังจาก - ดูw3.org/TR/html4/struct/tables.html#h-11.2.3 ดังนั้นวิธีการแก้ปัญหาของฉันยังคงทำงานจนกว่าคุณจะเลือกที่จะทำลายมาตรฐาน (ในกรณีที่คุณสามารถคาดหวังสิ่งอื่น ๆ ที่จะผิดพลาดได้เช่นกัน) โซลูชันของฉันยังใช้งานได้ไม่ว่าคุณจะมีร่างกายหรือไม่ในขณะที่ข้อเสนอของคุณจะล้มเหลวหากไม่มีใครอยู่
— ลุคเบนเน็ตต์
6
แม้จะมีข้อผิดพลาดใด ๆ ใน <tfoot /> นี่เป็นทางออกที่ดีกว่า หากไม่มี <tbody /> คุณสามารถใช้เทคนิคเดียวกันกับ <table /> ได้ ในขณะที่ "คำตอบที่ยอมรับ" ต้องการการตรวจสอบเพิ่มเติมเพื่อดูว่ามีแถวที่มีอยู่หรือไม่ (ฉันรู้ว่า OP ไม่ได้ระบุข้อกำหนดนี้ แต่มันไม่สำคัญ - โพสต์นี้เกิดขึ้นที่ 1 ในการค้นหาโดย Google สำหรับเทคนิคนี้และคำตอบที่ดีที่สุดไม่ใช่ด้านบน)
— CleverPatrick
5
นี่เป็นทางออกที่ดีกว่าการค้นหา ในการวนซ้ำหลายครั้งเทคนิคนี้ดูเหมือนจะใช้ได้เสมอ ในฐานะที่เป็น FYI ที่เพิ่มเข้ามาคุณสามารถใช้. prepend เพื่อเพิ่มแถวไปยังจุดเริ่มต้นของตารางในขณะที่. append จะวางแถวไว้ที่ท้ายตาราง
— แลนซ์คลีฟแลนด์
นี่ไม่ถูกต้องมันจะต่อแถวเข้ากับทุกแถวใน tbody
— garg10 พฤษภาคม
@ garg10may คุณช่วยแนะนำได้อย่างไร? มันกำหนดเป้าหมายไปที่ร่างกายไม่ใช่องค์ประกอบลูก
— ChadT
64

ฉันรู้ว่าคุณได้ขอวิธีการ jQuery ฉันดูมากและพบว่าเราสามารถทำได้ในวิธีที่ดีกว่าการใช้ JavaScript โดยตรงจากฟังก์ชั่นต่อไปนี้

tableObject.insertRow(index)

indexเป็นจำนวนเต็มที่ระบุตำแหน่งของแถวที่จะแทรก (เริ่มต้นที่ 0) สามารถใช้ค่า -1 ได้ ซึ่งส่งผลให้แถวใหม่จะถูกแทรกที่ตำแหน่งสุดท้าย

พารามิเตอร์นี้จำเป็นใน Firefox และOperaแต่มันเป็นตัวเลือกใน Internet Explorer, ChromeและSafari

หากไม่ระบุพารามิเตอร์นี้ให้insertRow()แทรกแถวใหม่ที่ตำแหน่งสุดท้ายใน Internet Explorer และที่ตำแหน่งแรกใน Chrome และ Safari

มันจะทำงานได้กับโครงสร้างที่ยอมรับได้ทุกตาราง HTML

ตัวอย่างต่อไปนี้จะแทรกแถวสุดท้าย (-1 ใช้เป็นดัชนี):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

ฉันหวังว่ามันจะช่วย

— Shashwat
แหล่งที่มา
2
ปัญหาของวิธีนี้ (อย่างที่ฉันเพิ่งค้นพบ) คือถ้าคุณมีส่วนท้ายมันจะเพิ่มหลังส่วนท้ายด้วย -1 เป็นดัชนี
— kdubs
35

ฉันแนะนำ

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

ตรงข้ามกับ 

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

firstและlastคำหลักที่ทำงานเกี่ยวกับแท็กแรกหรือสุดท้ายที่จะเริ่มต้นไม่ได้ปิด ดังนั้นสิ่งนี้จะเล่นได้ดีกว่าด้วยตารางที่ซ้อนกันหากคุณไม่ต้องการให้มีการเปลี่ยนแปลงตารางที่ซ้อนกัน แต่ให้เพิ่มลงในตารางโดยรวมแทน อย่างน้อยนี่คือสิ่งที่ฉันพบ

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
— Curtor
แหล่งที่มา
32

ในความคิดของฉันวิธีที่เร็วและชัดเจนคือ

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

นี่คือ ซอ Fiddle

นอกจากนี้ฉันสามารถแนะนำฟังก์ชั่นขนาดเล็กเพื่อทำการเปลี่ยนแปลง html เพิ่มเติม

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

หากคุณใช้ผู้แต่งสตริงของฉันคุณสามารถทำเช่นนี้

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

นี่คือ ซอ Fiddle

— sulest
แหล่งที่มา
หากคุณมีหลายรายการtbodyคุณจะได้รับเม็ดมีดหลายใบ
— Mark Schultheiss
ใช่คุณทำได้ :) คุณสามารถลอง$("SELECTOR").last()จำกัด การสะสมแท็กของคุณ
— sulest
23

สิ่งนี้สามารถทำได้อย่างง่ายดายโดยใช้ฟังก์ชัน "last ()" ของ jQuery

$("#tableId").last().append("<tr><td>New row</td></tr>");
— Nischal
แหล่งที่มา
9
ความคิดที่ดี แต่ฉันคิดว่าคุณต้องการเปลี่ยนตัวเลือกเป็น #tableId tr ในขณะนี้คุณจะได้รับตารางเพิ่มแถวด้านล่างตาราง
— Darryl Hein
17

ฉันใช้วิธีนี้เมื่อไม่มีแถวใดในตารางรวมทั้งแต่ละแถวค่อนข้างซับซ้อน

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...
— โดมินิก
แหล่งที่มา
ขอบคุณ. นี่เป็นทางออกที่หรูหรามาก ฉันชอบที่มันเก็บแม่แบบไว้ในตาราง มันทำให้โค้ดอ่านและบำรุงรักษาง่ายขึ้นและง่ายขึ้นมาก ขอบคุณอีกครั้ง.
— Rodney
14

สำหรับวิธีแก้ปัญหาที่ดีที่สุดที่โพสต์ที่นี่หากมีตารางที่ซ้อนอยู่ในแถวสุดท้ายแถวใหม่จะถูกเพิ่มเข้าไปในตารางที่ซ้อนกันแทนที่จะเป็นตารางหลัก วิธีแก้ปัญหาอย่างรวดเร็ว (พิจารณาตารางที่มี / ไม่มี tbody และตารางที่มีตารางซ้อนกัน)

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

ตัวอย่างการใช้งาน:

add_new_row('#myTable','<tr><td>my new row</td></tr>');
— Oshua
แหล่งที่มา
14

ฉันแก้ไขมันด้วยวิธีนี้

การใช้ jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

เศษเล็กเศษน้อย

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>
ขยายตัวอย่างข้อมูล

— Anton vBR
แหล่งที่มา
ฉันสามารถเพิ่มข้อมูลแบบไดนามิกในแถวใหม่ได้สำเร็จ แต่หลังจากใช้วิธีนี้ตัวกรองแบบกำหนดเองของฉันไม่ทำงาน .. คุณมีวิธีแก้ปัญหาสำหรับสิ่งนั้นหรือไม่ T แฮงค์คุณ
— Arjun
ฉันคิดว่าคุณต้องเรียกใช้ฟังก์ชั่นอัปเดตบางอย่าง Hade ที่จะบอกโดยไม่มีตัวอย่าง
— Anton vBR
13

ฉันมีปัญหาที่เกี่ยวข้องพยายามแทรกแถวของตารางหลังจากแถวที่ถูกคลิก ทั้งหมดไม่เป็นไรยกเว้นการเรียก. after () ไม่ทำงานสำหรับแถวสุดท้าย

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

ฉันลงจอดด้วยวิธีที่ไม่เป็นระเบียบมาก:

สร้างตารางดังนี้ (id สำหรับแต่ละแถว):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

ฯลฯ ...

แล้ว:

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
— Avron Olshewsky
แหล่งที่มา
ผมคิดว่านี่ควรจะเป็นคำถามใหม่แทนคำตอบหนึ่งที่มีอยู่ ...
— Darryl Hein
11

คุณสามารถใช้ฟังก์ชันเพิ่มแถว jQuery นี้ได้ มันใช้งานได้ดีกับโต๊ะที่มี<tbody>และไม่มี นอกจากนี้ยังคำนึงถึง colspan ของตารางแถวสุดท้ายของคุณด้วย

นี่คือตัวอย่างการใช้งาน:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
— Uzbekjon
แหล่งที่มา
ฉันไม่เห็นว่าการเป็นประโยชน์อย่างมาก สิ่งที่มันทำคือการเพิ่มแถวของตารางที่ว่างในตาราง โดยทั่วไปหากไม่เสมอไปคุณต้องการเพิ่มแถวของตารางใหม่โดยมีข้อมูลอยู่ในนั้น
— Darryl Hein
1
แต่นั่นคือสิ่งที่คุณต้องการ ฟังก์ชั่นนี้ช่วยให้คุณเพิ่มแถวว่างในตารางใด ๆ ของคุณไม่ว่าคุณจะมีคอลัมน์และแถวเท่าใดจึงทำให้เป็นฟังก์ชันสากล คุณสามารถดำเนินการต่อจากที่นั่นด้วย $ ('. tbl tr: last td') ประเด็นทั้งหมดคือการมีฟังก์ชั่นสากล !!!
— Uzbekjon
หากฟังก์ชันของคุณเพิ่มข้อมูลลงในแถวใหม่ของคุณคุณจะไม่สามารถใช้งานได้ในครั้งถัดไปในโครงการถัดไปของคุณ ประเด็นคืออะไร! มันมีอยู่ในความคิดของฉัน แต่คุณไม่จำเป็นต้องใช้มัน ...
— Uzbekjon
หากคุณเสนอฟังก์ชั่นที่ไม่ได้เป็นส่วนหนึ่งของแพ็คเกจทั่วไปโปรดใส่รหัสฟังก์ชั่นเต็มรูปแบบที่นี่ ขอบคุณ.
— Yevgeniy Afanasyev
10

ทางออกของฉัน:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

การใช้งาน:

$('#Table').addNewRow(id1);
— Ricky G
แหล่งที่มา
แล้วถ้าไม่มีtbodyในตารางล่ะ .. ?? หมายความว่าสามารถมีแถวภายใน<table>องค์ประกอบได้โดยตรงแม้ว่าจะไม่มีส่วนหัวก็ตาม
— shashwat
ฉันขอแนะนำให้คุณมีมาร์กอัปของคุณด้วย <TBody> ดังนั้นจึงเป็นไปตามมาตรฐาน HTML 5 หากไม่เป็นเช่นนั้นคุณสามารถทำ $ (นี่) ใช้ผนวก ('<tr id = "' + rowId + '"> </ tr> '); ที่เพิ่งต่อท้ายแถวในตาราง
— Ricky G
ฉันคิดว่าถ้าคุณจะทำให้ฟังก์ชั่นนี้คุณสามารถคืนค่าวัตถุ jQuery สำหรับแถวใหม่ดังนั้นมันจึงสามารถโยงกันได้
— ความโกลาหล
10 
    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);
— Pankaj Garg
แหล่งที่มา
แม้ว่านี่อาจเป็นคำตอบ แต่ก็ไม่มีประโยชน์สำหรับผู้เข้าชมในภายหลัง ... โปรดเพิ่มคำอธิบายบางส่วนเกี่ยวกับคำตอบของคุณ
— Jayan
9

คำตอบของนีลคือคำตอบที่ดีที่สุด อย่างไรก็ตามสิ่งต่าง ๆ จะยุ่งเร็วจริงๆ ข้อเสนอแนะของฉันคือการใช้ตัวแปรเพื่อจัดเก็บองค์ประกอบและผนวกเข้ากับลำดับชั้น DOM

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
— GabrielOshiro
แหล่งที่มา
9 
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

เขียนด้วยฟังก์ชั่นจาวาสคริปต์

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
— Jakir Hossain
แหล่งที่มา
7

นี่คือรหัสแฮ็ก hacketi ฉันต้องการบำรุงรักษาเทมเพลตแถวในหน้าHTML แถวของตาราง 0 ... n ถูกเรนเดอร์ ณ เวลาที่ร้องขอและตัวอย่างนี้มีหนึ่งแถว hardcoded และแถวแม่แบบที่ง่าย ตารางแม่แบบที่ถูกซ่อนอยู่และแท็กแถวที่จะต้องอยู่ในตารางที่ถูกต้องหรือเบราว์เซอร์อาจลดลงจากDOMต้นไม้ การเพิ่มแถวใช้ตัวระบุ counter + 1 และค่าปัจจุบันจะคงอยู่ในแอตทริบิวต์ data รับประกันแต่ละแถวได้รับURL ที่ไม่ซ้ำกันพารามิเตอร์

ฉันได้ทำการทดสอบบน Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (พร้อมSymbian 3), หุ้น Android และเบราว์เซอร์ Firefox เบต้า

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: ฉันให้เครดิตทั้งหมดแก่ทีม jQuery พวกเขาสมควรได้รับทุกสิ่ง การเขียนโปรแกรม JavaScript โดยไม่ใช้ jQuery - ฉันไม่อยากคิดถึงฝันร้ายนั้นด้วยซ้ำ

— Whome
แหล่งที่มา
7

ฉันคิดว่าฉันได้ทำในโครงการของฉันนี่คือ:

HTML

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});
— SNEH PANDYA
แหล่งที่มา
7

หากคุณมีตัวแปรอื่นคุณสามารถเข้าถึงใน<td>แท็กเช่นลอง

ด้วยวิธีนี้ฉันหวังว่ามันจะเป็นประโยชน์

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);
— MEAbid
แหล่งที่มา
6

เนื่องจากฉันมีวิธีเพิ่มแถวเกินไปในที่สุดหรือสถานที่เฉพาะดังนั้นฉันคิดว่าฉันควรแชร์สิ่งนี้ด้วย:

ขั้นแรกให้ค้นหาความยาวหรือแถว:

var r=$("#content_table").length;

จากนั้นใช้โค้ดด้านล่างเพื่อเพิ่มแถวของคุณ:

$("#table_id").eq(r-1).after(row_html);
— Jaid07
แหล่งที่มา
6

เพื่อเพิ่มตัวอย่างที่ดีในหัวข้อนี่คือวิธีแก้ปัญหาหากคุณต้องการเพิ่มแถวที่ตำแหน่งเฉพาะ

แถวพิเศษจะถูกเพิ่มหลังแถวที่ 5 หรือท้ายตารางหากมีน้อยกว่า 5 แถว

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

ฉันใส่เนื้อหาลงในคอนเทนเนอร์ที่พร้อมใช้งาน (ซ่อนอยู่) ด้านล่างตาราง .. ดังนั้นหากคุณ (หรือผู้ออกแบบ) ต้องเปลี่ยนมันไม่จำเป็นต้องแก้ไข JS

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>
— d.raev
แหล่งที่มา
6 
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

คุณสามารถแคชตัวแปรส่วนท้ายและลดการเข้าถึง DOM (หมายเหตุ: อาจจะเป็นการดีกว่าถ้าใช้แถวปลอมแทนที่จะเป็นส่วนท้าย)

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
— พาเวลชคลีนิก
แหล่งที่มา
5 
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

จะเพิ่มแถวใหม่กับครั้งแรก TBODYของตารางโดยไม่ต้องขึ้นอยู่กับการใด ๆTHEADหรือTFOOTปัจจุบัน (ฉันไม่พบข้อมูลจาก jQuery เวอร์ชันใด.append()นี้มีพฤติกรรมนี้)

คุณอาจลองในตัวอย่างเหล่านี้:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

ในa bแถวตัวอย่างที่ถูกแทรกหลังจาก1 2ไม่ใช่หลังจาก3 4ในตัวอย่างที่สอง หากตารางว่างเปล่า jQuery จะสร้างTBODYแถวใหม่

— Alexey Pavlov
แหล่งที่มา
5

หากคุณกำลังใช้ปลั๊กอิน Datatable JQuery คุณสามารถลอง

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

อ้างอิง Datatables fnAddData Datatables API

— Praveena M
แหล่งที่มา
5

ด้วยวิธีง่าย ๆ :

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
— vipul sorathiya
แหล่งที่มา
คุณช่วยอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับโซลูชันที่คุณให้ได้ไหม
— abarisone
4

ลองวิธีนี้ง่ายมาก

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>
ขยายตัวอย่างข้อมูล

— rajmobiapp
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.